Skip to content

Commit

Permalink
fix(template-compiler): disable static content optimization for iframes
Browse files Browse the repository at this point in the history
  • Loading branch information
nolanlawson committed Oct 21, 2024
1 parent bf7be3f commit c3c4554
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { createElement } from 'lwc';
import Component from 'x/component';

let spy;

beforeEach(() => {
spy = spyOn(Element.prototype, 'setAttribute');
});

it('renders iframes correctly - W-17015807', async () => {
const elm = createElement('x-component', { is: Component });
document.body.appendChild(elm);

await Promise.resolve();

expect(spy).toHaveBeenCalledOnceWith('src', 'about:blank');
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<iframe src="about:blank"></iframe>
</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { LightningElement } from 'lwc';

export default class extends LightningElement {}
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import _implicitStylesheets from "./attribute-allow.css";
import _implicitScopedStylesheets from "./attribute-allow.scoped.css?scoped=true";
import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
const $fragment1 = parseFragment`<iframe allow="geolocation https://google-developers.appspot.com"${3}></iframe>`;
import { freezeTemplate, registerTemplate } from "lwc";
const stc0 = {
attrs: {
allow: "geolocation https://google-developers.appspot.com",
},
key: 0,
};
function tmpl($api, $cmp, $slotset, $ctx) {
const { st: api_static_fragment } = $api;
return [api_static_fragment($fragment1, 1)];
const { h: api_element } = $api;
return [api_element("iframe", stc0)];
/*LWC compiler vX.X.X*/
}
export default registerTemplate(tmpl);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@ import _implicitStylesheets from "./no-escaping-tags.css";
import _implicitScopedStylesheets from "./no-escaping-tags.scoped.css?scoped=true";
import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
const $fragment1 = parseFragment`<xmp${3}>&lt;/xmp&gt;Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></xmp>`;
const $fragment2 = parseFragment`<iframe${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></iframe>`;
const $fragment3 = parseFragment`<noembed${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></noembed>`;
const $fragment4 = parseFragment`<noframes${3}><p>It seems your browser does not support frames or is configured to not allow them.</p></noframes>`;
const $fragment2 = parseFragment`<noembed${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></noembed>`;
const $fragment3 = parseFragment`<noframes${3}><p>It seems your browser does not support frames or is configured to not allow them.</p></noframes>`;
const stc0 = {
key: 2,
};
function tmpl($api, $cmp, $slotset, $ctx) {
const { st: api_static_fragment } = $api;
const { st: api_static_fragment, t: api_text, h: api_element } = $api;
return [
api_static_fragment($fragment1, 1),
api_static_fragment($fragment2, 3),
api_static_fragment($fragment3, 5),
api_static_fragment($fragment4, 7),
api_element("iframe", stc0, [
api_text("Hello <div>world</div> <div>foo</div>"),
]),
api_static_fragment($fragment2, 4),
api_static_fragment($fragment3, 6),
];
/*LWC compiler vX.X.X*/
}
Expand Down
3 changes: 3 additions & 0 deletions packages/@lwc/template-compiler/src/codegen/static-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ function isStaticNode(node: BaseElement, apiVersion: APIVersion): boolean {
// it is an element
result &&= isElement(node);

// See W-17015807
result &&= node.name !== 'iframe';

// all attrs are static-safe
// the criteria to determine safety can be found in computeAttrValue
result &&= attributes.every(({ name }) => {
Expand Down

0 comments on commit c3c4554

Please sign in to comment.