Functionality Reference
  • Resource map
  • Resources
    • Apple Music
    • Auth0
      • Auth0 - API connector's OAuth2 User-Agent Flow.
      • Auth0 - Manual implementation
    • Azure AD SSO
    • Best practices building Bubble.io apps
    • Best practices - Test recommendations for devs
    • Bitly
    • Bottomline BACS payments
    • Bubble API - Authentication
    • Bubble API Connector
    • Check if address is within custom defined area on Map
    • Chrome Devtools
    • Click a button by pressing Enter
    • Credit Card Payments
      • Square
      • Stripe Plugin
      • Stripe Manual Integration
    • Date/Time Operations
    • Dwolla + Plaid ACH
    • Editor.js rich text editor
    • Embedding a pdf preventing the user from downloading it
    • Excel formula parser
    • Exporting data (xlsx, CSV)
    • Documents & eSignatures
      • Eversign
      • Formstack (formerly Webmerge)
      • Hellosign
    • FFMPEG audio processing
    • First Payment Merchant Services
    • Fuzzy Search
    • Google
      • Authentication
      • GA4 Basic implementation
      • Google Analytics
      • Google Calendar
      • Google Charts
      • Google Maps Drawing
      • Google maps geometry - plugin
      • Service Account Authentication
    • How to build quick & safe redirects in Bubble
    • How to correctly use the ID attribute
    • How to secure webhooks
    • Images with text overlays
    • Limit file types in the File Uploader
    • Loading large linked datasets into Bubble
    • Localize Translations
    • Mobile share functionality
    • Nylas
    • OpenAI
    • Paguelo Facil payments
    • PDF generation
    • Perfect Tense (grammar checker)
    • Performance testing
      • Page speed benchmarking
      • App load testing with Loadster
    • Persona ID verification
    • Plaid
    • POST response redirects
    • Postmark (coming soon)
    • QR codes
    • Rappid flowchart
    • Implementing Google reCaptcha
    • Recursive workflows
    • Redirect logged in users from the root domain to the Bubble app
    • Regex
    • S3 plugin
      • UI element
      • No UI element
      • Server-side actions
      • Setting up the AWS bucket
    • Salesforce
    • Security reference
    • Security tools
      • CSV injection prevention
      • Encrypting text
      • File malware scanner
      • XSS stopper + HTML whitelist
    • Sendgrid
      • General info
      • Plugin
    • Simple Marketplace setup with PayPal
    • Stripe no-code portal and Pricing table
    • SVGs
    • Tokbox
    • Tokbox video chat
    • Track users online status
    • Twilio
      • Twilio Studio
      • Twilio SMS
      • Twilio video chat embed
    • Bubble.io Version Control best practices
    • Wistia video player
    • Youtube player and data
    • URL Meta
    • Web3
      • Converting to/from Wei
      • MetaMask Plugin
    • Widget as a service from Bubble as an embedded iFrame
    • Xano: how to implement in Bubble
    • Using the Canvas extension with a non-Canvas app
  • Other
  • Grant access to your Plaid account
  • Grant access to your Twilio account
  • Grant access to your Stripe account
Powered by GitBook
On this page
  • High Level Overview
  • Demo
  • Technical Details
  • Inputs
  • Additional technical docs
  • HTML whitelist - stop email phishing attacks
  • Video explaining how to use options for processing HTML, adding whitelist

Was this helpful?

  1. Resources
  2. Security tools

XSS stopper + HTML whitelist

PreviousFile malware scannerNextSendgrid

Last updated 3 years ago

Was this helpful?

High Level Overview

Cross site scripting (XSS) is a common security exploit on websites that allows one user to execute javascript on another user's browser. The attack is served in data saved to the database by the attacking user that is not properly cleaned, and which is later displayed in a way where the javascript gets executed by the browser.

Demo

Run mode credentials:

u: username

p: password

Technical Details

This implementation uses 1 plugin which has both a client side and a server side flow to "sanitize" user input. Each of them takes a text as an input and then outputs a sanitized text, free of XSS exploits. They also can be customized for specific use cases.

With the default options, some HTML tags that are not dangerous (e.g. "<b>" tags that make text bold) will be preserved and displayed in the final output. HTML that may be dangerous is converted to a string that will be displayed. Instead of executing <script> alert("XSS"); </script>, after being processed by this plugin this code would be displayed like a text if it is shown in a Bubble HTML element.

To clean data before saving to the database, run the server-side plugin action, not the client-side/element action.

The client-side element will run nearly instantly on small texts, and only downloads a small (16kb) javascript file onto the page. However, note that cleaning the XSS client-side should not be done before saving to the database, only before displaying a potentially insecure text to a different user. On their browser, users can modify the library that the client-side action refers to and render it useless.

Inputs

  • Text to clean: the text that needs to be sanitized.

  • Options (optional)

Additional technical docs

HTML whitelist - stop email phishing attacks

Emails can be used as a vector to steal user data, user credentials and other sensitive info. This relatively simple attack has been the cause of several high-profile cybersecurity breaches over the past few years.

Defending against these attacks is possible with this plugin, which can remove all links from emails.

Video explaining how to use options for processing HTML, adding whitelist

Note that the standard flow (without options) has custom logic which will be overwritten by adding a custom whitelist of tags/attributes. An example: without passing options, <b> tags are allowed, but if a whitelist is added and doesn't include <b> tags, they will be stripped from the text.

Strip URLs

The plugin also includes a server workflow to strip all URLs from some text. This is only necessary if users can send messages to other users which are also sent through your app's email, and could be easily confused by users to look like they're coming from app admins. This link, for example, wouldn't raise suspicion from all users - it looks quite official.

Send a custom JSON with options for this function. This can be used to specify a whitelist, or other options specified by the .

shows an implementation of this Strip URL workflow functionality. Run mode page (username/password for credentials):

Editor link
Run mode link
git repo
Library used for this implementation
If custom options are set to allow CSS, this library used for the CSS filters
This Bubble editor
https://chris-sandbox-3.bubbleapps.io/version-test/url-cleaner?debug_mode=true