Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rich text: fix format deregistration #31518

Merged
merged 13 commits into from
Jul 13, 2021
Prev Previous commit
Next Next commit
Fix invalid block HTML
  • Loading branch information
ellatrix committed Jul 13, 2021
commit c641674c2f8a07b6abaedaca9cb8699cb7bfbebb
14 changes: 11 additions & 3 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,22 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
import { createContext, useMemo, useCallback } from '@wordpress/element';
import {
createContext,
useMemo,
useCallback,
RawHTML,
} from '@wordpress/element';
import {
getBlockType,
getSaveElement,
getSaveContent,
isUnmodifiedDefaultBlock,
hasBlockSupport,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
import { compose, pure, ifCondition } from '@wordpress/compose';
import { safeHTML } from '@wordpress/dom';

/**
* Internal dependencies
Expand Down Expand Up @@ -134,10 +140,12 @@ function BlockListBlock( {
let block;

if ( ! isValid ) {
const saveContent = getSaveContent( blockType, attributes );

block = (
<Block className="has-warning">
<BlockInvalidWarning clientId={ clientId } />
<div>{ getSaveElement( blockType, attributes ) }</div>
<RawHTML>{ safeHTML( saveContent ) }</RawHTML>
</Block>
);
} else if ( mode === 'html' ) {
Expand Down
12 changes: 12 additions & 0 deletions packages/dom/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,18 @@ _Returns_

- `Element`: The new node.

<a name="safeHTML" href="#safeHTML">#</a> **safeHTML**

Strips scripts and on\* attributes from HTML.

_Parameters_

- _html_ `string`: HTML to sanitize.

_Returns_

- `string`: The sanitized HTML.

<a name="unwrap" href="#unwrap">#</a> **unwrap**

Unwrap the given node. This means any child nodes are moved to the parent.
Expand Down
1 change: 1 addition & 0 deletions packages/dom/src/dom/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ export { default as __unstableStripHTML } from './strip-html';
export { default as isEmpty } from './is-empty';
export { default as removeInvalidHTML } from './remove-invalid-html';
export { default as isRTL } from './is-rtl';
export { default as safeHTML } from './safe-html';
36 changes: 36 additions & 0 deletions packages/dom/src/dom/safe-html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* Internal dependencies
*/
import remove from './remove';

/**
* Strips scripts and on* attributes from HTML.
*
* @param {string} html HTML to sanitize.
*
* @return {string} The sanitized HTML.
*/
export default function safeHTML( html ) {
const { body } = document.implementation.createHTMLDocument( '' );
body.innerHTML = html;
const elements = body.getElementsByTagName( '*' );

// @ts-ignore
for ( const element of elements ) {
if ( element.tagName === 'SCRIPT' ) {
remove( element );
} else {
const length = element.attributes.length;

for ( let i = 0; i < length; i++ ) {
const { name: key } = element.attributes[ i ];

if ( key.startsWith( 'on' ) ) {
element.removeAttribute( key );
}
}
}
}

return body.innerHTML;
}