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

Block supports: Fix block attribute (style and class) double-encoding #25079

Merged
merged 4 commits into from
Sep 4, 2020

Conversation

sirreal
Copy link
Member

@sirreal sirreal commented Sep 4, 2020

Description

Remove double encoding of class and style attributes in block supports.

Dynamic blocks rendered by block-supports double encode html which may produce broken results. For example, if we start with valid HTML including a single quote (apostrophe) in a double-quoted attribute, the single quote will be encoded by esc_attr to the unicode HTML entity '. DOMElement::setAttribute will then encode this result to '. This single entity is now doubly encoded and will be interpreted by the browser as '. A full example:

<!-- Saved block content: -->
<div style="background-image:url('https://example.com/image.png');"></div>

<!-- with esc_attr we would get this (also seems to be valid) -->
<div style="background-image:url(&#039;https://example.com/image.png&#039;);"></div>

<!-- setAttribute escapes the escaped attribute, this is now broken -->
<div style="background-image:url(&amp;#039;https://example.com/image.png&amp;#039;);"></div>

When this finally reaches the browser, it makes a request for the background image to the relative path & because the unescaped url is interpreted as &#039;https://example.com/image.png&#039;.

I've added unit tests which attempt to clarify and verify the expected behavior, we can observe the double encoding in the failed unit tests on the first commit of this PR.

This behavior was introduced in #24486.

How has this been tested?

Unit tests.
Manual testing.

Types of changes

Bug fix: Fix double-encoding of dynamic block classes and styles.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@sirreal sirreal added [Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended Needs Technical Feedback Needs testing from a developer perspective. labels Sep 4, 2020
@sirreal sirreal self-assigned this Sep 4, 2020
@github-actions
Copy link

github-actions bot commented Sep 4, 2020

Size Change: 0 B

Total Size: 1.2 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.41 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 8.5 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 128 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.64 kB 0 B
build/block-library/editor.css 8.64 kB 0 B
build/block-library/index.js 138 kB 0 B
build/block-library/style-rtl.css 7.6 kB 0 B
build/block-library/style.css 7.6 kB 0 B
build/block-library/theme-rtl.css 754 B 0 B
build/block-library/theme.css 754 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.7 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/index.js 11.7 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/index.js 305 kB 0 B
build/edit-post/style-rtl.css 6.26 kB 0 B
build/edit-post/style.css 6.25 kB 0 B
build/edit-site/index.js 17.1 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 12 kB 0 B
build/edit-widgets/style-rtl.css 2.46 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.6 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.64 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@sirreal sirreal marked this pull request as ready for review September 4, 2020 17:19
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change looks good to me (especially after considering the detailed description of why we don't need to use esc_attr here #25079 (comment)), and does fix the double encoding issue.

Thanks @sirreal !

P.S. Do you think it makes sense to add a small comment somewhere regarding the need (or lack of) for esc_attr? This approach is still fairly new and if it is changed to no longer user DOMDocument && setAttribute (due to any concerns with performance or any other issues that may be found), the need to use esc_attr may arise again?

lib/block-supports/index.php Show resolved Hide resolved
lib/block-supports/index.php Show resolved Hide resolved
@sirreal sirreal merged commit e56efc0 into master Sep 4, 2020
@sirreal sirreal deleted the fix/block-supports-double-escape-attributes branch September 4, 2020 21:12
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 4, 2020
@sirreal sirreal modified the milestones: Gutenberg 9.0, Gutenberg 8.9 Sep 7, 2020
youknowriad pushed a commit that referenced this pull request Sep 7, 2020
…#25079)

* Add encoding tests

* Remove double attribute value escaping

* fixup! Add encoding tests

* Add escaping comment
@mcsf
Copy link
Contributor

mcsf commented Sep 7, 2020

Oof, thanks for fixing this!

@sirreal sirreal modified the milestones: Gutenberg 9.0, Gutenberg 8.9 Sep 7, 2020
@mcsf mcsf mentioned this pull request Oct 14, 2020
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks Needs Technical Feedback Needs testing from a developer perspective. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants