Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
packages/dom/src/serialize-frames.js
Outdated
| // assign serialized html to srcdoc and remove src | ||
| cloneEl.setAttribute('srcdoc', serialized.html); | ||
| let p = getPolicy() || {}; | ||
| cloneEl.setAttribute('srcdoc', p.createHTML ? p.createHTML(serialized.html) : serialized.html); |
There was a problem hiding this comment.
should we do based on parameter which can be passed from SDK and not do in general to reduce the impact?
There was a problem hiding this comment.
It is not needed as as we are checking if policy has typeof window !== 'undefined' && window.trustedTypes && window.trustedTypes.createPolicy) {
if (policy && policy.createHTML) return policy;
p.createHTML(serialized.html) better than serialized.html and we have a fallback to serialized.html
|
|
||
| // assign serialized html to srcdoc and remove src | ||
| cloneEl.setAttribute('srcdoc', serialized.html); | ||
| let p = getPolicy() || {}; |
There was a problem hiding this comment.
Also was checking if site has specific CSP even though you add this it will have no impact and will still break.
Instead can we have catch block for TrustedHTML issue to continue with serialization even though we are not able to serialize iframe?, this will not cause failures for Website Scanner in that case
There was a problem hiding this comment.
true, it fixes it but we see that few resources are missing in that case. It might happen that some iframe or asset do not load in that case. added a try catch to catch this.
4 participants
Description
This PR addresses an issue encountered when taking snapshots on websites that enforce strict Content Security Policies (CSP) with Trusted Types, such as YouTube.
When Percy serializes iframes, it attempts to set the srcdoc attribute on the cloned iframe element. On pages with require-trusted-types-for 'script', the browser throws a TypeError if a raw string is assigned to DOM injection sinks like srcdoc.
Error:
TypeError: Failed to execute 'setAttribute' on 'Element': This document requires 'TrustedHTML' assignment.Proposed Solution
The fix involves creating a "pass-through" Trusted Types policy if the API is available in the current environment.
Policy Creation: Checks for window.trustedTypes and registers a percy-dom policy that simply returns the given HTML.
Safe Assignment: Wraps the serialized HTML string using policy.createHTML() before setting the srcdoc attribute. This returns a TrustedHTML object which the browser accepts as secure.
Fallback: Maintains backward compatibility for environments where Trusted Types are not supported or enabled.