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

supports.html = false doesn't escape HTML (regression?) #13218

Open
Viper007Bond opened this Issue Jan 6, 2019 · 12 comments

Comments

Projects
None yet
5 participants
@Viper007Bond
Copy link

Viper007Bond commented Jan 6, 2019

supports.html = false doesn't seem to work anymore. I swear it used to escape HTML entities properly.

To Reproduce

  1. Add a core/code block.
  2. Type/paste some code containing HTML entities, such as:
<a href="http://wordpress.org/">WordPress</a>  &lt;strong&gt;
  1. Publish post.

Expected behavior

Code content should stay the same. It does initially but if you edit the post again, there's raw < in the source and things like &lt; have been converted to <. The escaping of HTML hasn't been done.

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;a href="http://wordpress.org/">WordPress&lt;/a>  &lt;strong&gt;</code></pre>
<!-- /wp:code -->

Should be something like this:

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;a href="http://wordpress.org/"&gt;WordPress&lt;/a&gt;  &amp;lt;strong&amp;gt;</code></pre>
<!-- /wp:code -->

Desktop

  • OS: Windows 10
  • Browser: Firefox Developer Edition
  • Version: 65.0b8

Additional context

  • WordPress Version: 5.0.3-alpha-44409
@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Jan 7, 2019

AFAIK, This option is not about HTML escaping, it's about enabling/disabling the HTML mode for this block.

@Viper007Bond

This comment has been minimized.

Copy link

Viper007Bond commented Jan 7, 2019

Oh, well I still believe the behavior has changed. I think all entities used to be escaped when stored in the database.

Even if I'm remembering wrong, the core/code block isn't behaving as expected. Content should stay as entered.

@youknowriad

This comment has been minimized.

Copy link
Contributor

youknowriad commented Jan 7, 2019

Yes, probably. I believe I saw similar issues about HTML escaping.

@designsimply

This comment has been minimized.

Copy link
Contributor

designsimply commented Jan 7, 2019

Closed #11624 in favor of this issue because it is more concise. Please see the screenshots at #11624 (comment).

@finip

This comment has been minimized.

Copy link

finip commented Jan 7, 2019

@designsimply okay, I don't think I'm going to be taken seriously anymore. thank you for remembering me:)
i'll continue to work on this issue, and I'll add an article about it later, because i'm trying to solve these problems these days, maybe i thought you had given up my problem. but now there is a new hope, let me feel good about this problem again, and everything will start over again! uuuuuuuuuuu

@aduth

This comment has been minimized.

Copy link
Member

aduth commented Jan 7, 2019

The issue here may be the fact that the Code Block defines its content attribute as sourced by text, not html, which is the difference of textContent vs. innerHTML.

var el = document.createElement( 'div' );
el.innerHTML = '<code>chicken &gt; ribs</code>';

el.firstChild.textContent;
// "chicken > ribs"

el.firstChild.innerHTML;
// "chicken &gt; ribs"
@finip

This comment has been minimized.

Copy link

finip commented Jan 7, 2019

@designsimply okay, I don't think I'm going to be taken seriously anymore. thank you for remembering me:)
i'll continue to work on this issue, and I'll add an article about it later, because i'm trying to solve these problems these days, maybe i thought you had given up my problem. but now there is a new hope, let me feel good about this problem again, and everything will start over again! uuuuuuuuuuu

https://webkv.com/2019/01/02/wordpress-code-highlight-plug-in-crayon-syntax-highlighter-error-repair-in-php7-3-0.shtml

i can determine which script this problem occurs because by comparing classic editor with gutenbeerg's html switch, classic editor is correct at present, only gutenberg is incorrect, but I can't modify the code directly because I am not competent and familiar with the new block editor.

@Viper007Bond

This comment has been minimized.

Copy link

Viper007Bond commented Jan 7, 2019

The issue here may be the fact that the Code Block defines its content attribute as sourced by text, not html, which is the difference of textContent vs. innerHTML.

I don't believe so as it's being saved unescaped when it should be being escaped. Right now it's a weird mix of escaped and unescaped due to stuff like kses.

@finip

This comment has been minimized.

Copy link

finip commented Jan 7, 2019

i went through two kinds of editors: gutenberg and classic editor to compare articles published. obviously this only happens in the background editor. the front-end display is consistent. that is to say, it just happens between html/content switching, but this will cause problems. i think it is the pair of parentheses on the right that have not been escaped. this is usually caused by a js in the block editor when it is converted. it's missing a filter or an end, but tomorrow i'll have to concentrate on gutenberg code to locate it. i almost gave up on this issue, but when i saw the concern of so many officials and developers, i had new hope:)

005
007

@finip

This comment has been minimized.

Copy link

finip commented Jan 7, 2019

at present, i can only locate this file gutenberg-master\test\integration\full-content\fixtures\core__code.serialized.html,
`

export default function MyButton() {
	return <Button>Click Me!</Button>;
}
` in the latest single block editor, but in wordpress version, i can't find any information about it anyway. i can only suspect that this file wp-includes\js\dist\blocks.js is between 899-912 lines.

`showdown.helper.unescapeHTMLEntities = function (txt) {
'use strict';

return txt
.replace(/"/g, '"')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&');
};`
i need help. it's beyond my skill range.
008

@aduth

This comment has been minimized.

Copy link
Member

aduth commented Jan 8, 2019

I don't believe so as it's being saved unescaped when it should be being escaped. Right now it's a weird mix of escaped and unescaped due to stuff like kses.

It may be a combination. I think another issue is that the Code block's save function should be using dangerouslySetInnerHTML so as not to be subject to the default escaping which takes place in the serialization of the React element.

save( { attributes } ) {
return <pre><code>{ attributes.content }</code></pre>;
},

@finip

This comment has been minimized.

Copy link

finip commented Jan 12, 2019

i noticed that only < transformed & lt; & transformed & amp; other transformations will not occur, so the problem is &. so which js is in control
'?

<pre-class="wp-block-code"> < &

<! - / wp: code - >'
it, should we not just focus on js, whether there is a template error here, it should be a template, such as .htm .xml and other frameworks.

004

and maybe this here:

function escape( text ) {
return text
.replace( /\t/g, '\\t' )
.replace( /\r/g, '\\r' )
.replace( /\n/g, '\\n' )
.replace( /\&/g, '&amp;' )
.replace( /</g, '&lt;' );
}

export default {
specialTokens: {
textEscaped: [ 'a b', 'i &lt;3 tags', '1&amp;2&amp;3&amp;4' ],
htmlEscaped: [ 'a&nbsp;&nbsp;&nbsp;b', 'i&nbsp;&lt;3&nbsp;tags', '1&amp;2&amp;3&amp;4' ],
textUnescaped: [ 'a b', 'i <3 tags', '1&2&3&4' ],
htmlUnescaped: [ 'a&nbsp;&nbsp;&nbsp;b', 'i&nbsp;&lt;3&nbsp;tags', '1&amp;2&amp;3&amp;4' ],
},
specialSuggestions: {
textEscaped: [ '&lt;3', 'Stuff &amp; Things', 'Tags &amp; Stuff', 'Tags &amp; Stuff 2' ],

export function escapeAmpersand( value ) {
return value.replace( /&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;' );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment