---
title: Do not modify innerHTML or outerHTML
description: Datadog, the leading service for cloud-scale monitoring.
breadcrumbs: >-
  Docs > Datadog Security > Code Security > Static Code Analysis (SAST) > SAST
  Rules > Do not modify innerHTML or outerHTML
---

> For the complete documentation index, see [llms.txt](https://docs.datadoghq.com/llms.txt).

# Do not modify innerHTML or outerHTML

{% callout %}
# Important note for users on the following Datadog sites: app.ddog-gov.com, us2.ddog-gov.com

{% alert level="danger" %}
This product is not supported for your selected [Datadog site](https://docs.datadoghq.com/getting_started/site.md). ({% placeholder "user-datadog-site-name" /%}).
{% /alert %}

{% /callout %}

## Metadata{% #metadata %}

**ID:** `typescript-browser-security/inner-outer-html`

**Language:** TypeScript

**Severity:** Warning

**Category:** Security

**CWE**: [79](https://cwe.mitre.org/data/definitions/79.html)

## Description{% #description %}

Properties like `innerHTML` and `outerHTML` should not be modified directly unless such modifications are clearly reviewed. Modifying `innerHTML` or `outerHTML` using user inputs that has not been validated can lead to XSS injection.

#### Learn More{% #learn-more %}

- [Why InnerHTML Is a Bad Idea and How to Avoid It?](https://www.dhairyashah.dev/posts/why-innerhtml-is-a-bad-idea-and-how-to-avoid-it/)
- [CWE-79 - Improper Neutralization of Input During Web Page Generation](https://cwe.mitre.org/data/definitions/79.html)

## Non-Compliant Code Examples{% #non-compliant-code-examples %}

```typescript
function display(text) {
    const mealPlanDiv = document.getElementById("meal-plan");
    const defaultMessage = document.getElementById("default-message");
    defaultMessage.style.display = 'none';
    something.innerHTML = `
        
        ${something}
        
        <div style="background:white; padding:15px; border-radius:10px;">
        </div>
    `;


    somethingElse.innerHTML = `
        <div style="background:white; padding:15px; border-radius:10px;">
            ${DOMPurify.sanitize(marked(text))}
        </div>
    `;

    somethingElseElse.innerHTML = `
        
        ${something}
        
        <div style="background:white; padding:15px; border-radius:10px;">
            ${DOMPurify.sanitize(marked(text))}
        </div>
    `;
}
```

```typescript
function nonCompliant(argument) {
  const content = '<div>' + argument + '</div>';
  document.write(content);
}
```

```typescript
function nonCompliant(myArgument) {
  document.body.outerHTML = myArgument;

  document.getElementById('example').innerHTML = '<div>' + hello + '</div>'
}
```

```typescript
if (typeof(SERVER_DOMAIN) === 'undefined') {
   window.location.replace("/unconfigured.html");
}

const RECEIVE_URL = SERVER_DOMAIN + "/challenge_scoreboard.html" + "?origin=" + get_domain();

var window_ref = null;

document.getElementById("username").focus();

function store_username() {
   var username;
   var username_obj;

   username_obj = document.getElementById("username");
   username = username_obj.value

   var welcome;
   welcome = document.getElementById("welcome");
   welcome.innerHTML = "Welcome " + html_encode (username);

   var set_username;
   set_username = document.getElementById("set_username");
   set_username.style.display="none";

   var game;
   game = document.getElementById("game");
   game.style.display="inline";

   start_game();
   // have to do time out so the window can open
   setTimeout (function () {send_username(username);}, 1000);

   return false;
}
```

## Compliant Code Examples{% #compliant-code-examples %}

```typescript
foo = document.getElementById("bar");

foo.innerHTML = "<br />";
```

```typescript
function safeUpdate(content: string) {
    const element = document.getElementById("content");
    // Safe: using DOMPurify to sanitize content
    element.innerHTML = DOMPurify.sanitize(content);
}

function safeTextUpdate(text: string) {
    const element = document.getElementById("content");
    // Safe: using textContent instead of innerHTML
    element.textContent = text;
}
```
  Seamless integrations. Try Datadog Code SecurityDatadog Code Security 
{% icon name="icon-external-link" /%}