-
Notifications
You must be signed in to change notification settings - Fork 756
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
[Violation] Avoid using document.write() #1600
Comments
This also affects using BrowserSync on sites which use a Content Security Policy. See Refactor calls to JS APIs incompatible with CSP in this documentation. |
+1 |
For what it's worth, I took a shot at fixing this, but I ran into trouble actually building browser-sync locally. using node v8.15.0, npm v6.4.1
|
And I'm thinking this is the change that should be made to fix the original issue. Replace the contents of script-tags.tmpl with this:
|
A slightly corrected version will remove annoying message in DevTools: <script id="__bs_script__">//<![CDATA[
let script = document.createElement('script');
script.setAttribute('async', '');
script.setAttribute('src', '%script%'.replace("HOST", location.hostname));
document.body.appendChild(script);
//]]></script> |
@maxzz Oh yeah. That makes more sense. Looking back at what I wrote, I don't think I completed the thought. Were you able to get browser-sync to build locally? |
As per issue BrowserSync#1600 Chrome browsers throw a violation warning in the console when `document.write` is used for injecting elements. Using the 'appendChild' method to inject the script tag mitigates the violation. Violation reference: https://developers.google.com/web/updates/2016/08/removing-document-write
// TODO: Workaround for https://github.com/BrowserSync/browser-sync/issues/1600.
snippetOptions: {
rule: {
match: /<\/head>/u,
fn(snippet, match) {
const {
groups: {src}
} = /src='(?<src>[^']+)'/u.exec(snippet);
return `<script src="${src}" async></script>${match}`;
}
}
} |
I faced a similar problem while trying to implement a Content Security Policy: I needed an inline script that doesn't use eleventyConfig.setBrowserSyncConfig({
snippetOptions: {
rule: {
match: /<\/body>/i,
fn(snippet, match) {
const { src } = /src='(?<src>[^']+)'/u.exec(snippet).groups;
return `<script>${generateScript(src)}</script>${match}`;
},
}
},
});
function generateScript(src) {
return `
let script = document.createElement('script');
script.setAttribute('async', '');
script.setAttribute('src', '${src}');
document.body.appendChild(script);`;
} |
This really is not fixed yet. From 2018, is it that hard to fix? Probably not happening, huh? I'm a JavaScript beginner, and I can't follow the work-arounds. Any way we could get a 'beginner' script? |
fixed in |
Issue details
Chrome nags about using document.write(), it's a bad practice and may break in the future.
Steps to reproduce/test case
Please specify which version of Browsersync, node and npm you're running
Affected platforms
Browsersync use-case
for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync
const browserSync = BrowserSync.create();
The text was updated successfully, but these errors were encountered: