Skip to content

Support Trusted Types #1575

Closed
Closed
@shhnjk

Description

@shhnjk

Bug Report

When Trusted Types is enabled on a website, following lines causes Trusted Types violation due to string assignment to a dangerous sink (i.e. innerHTML).

element.__resizeTriggers__.innerHTML =
'<div class="expand-trigger"><div></div></div>' +
'<div class="contract-trigger"></div>';

This can be prevented by changing those lines to something like:

var expandTriggerDiv = document.createElement('div');
expandTriggerDiv.class = 'expand-trigger';
expandTriggerDiv.appendChild(document.createElement('div'));
var contractTriggerDiv = document.createElement('div');
contractTriggerDiv.class = 'contract-trigger';
element.__resizeTriggers__.appendChild(expandTriggerDiv);
element.__resizeTriggers__.appendChild(contractTriggerDiv);

OR

var htmlString = 
  '<div class="expand-trigger"><div></div></div>' + 
  '<div class="contract-trigger"></div>';
if (window.trustedTypes) {
  var staticPolicy = trustedTypes.createPolicy(
    'react-virtualized-auto-sizer', {createHTML: () => htmlString});
  element.__resizeTriggers__.innerHTML = staticPolicy.createHTML('');
} else {
  element.__resizeTriggers__.innerHTML = htmlString;
}

Note that React already supports Trusted Types.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions