In HTML webpage, the content within noscript tags are not getting rendered by browsers with script blocking extension

Asked 1/4, 2019 at 9:38 Answered 1/4, 2019 at 10:10

In HTML webpage, the content within noscript tags are not getting rendered by browsers with script blocking extension.

I have a page

http://www.zen76171.zen.co.uk/aaa2.html

with this HTML

<!doctype html>
<html>
<head>
<noscript>aaa</noscript>
<script>document.write("bbb")</script>
</head>
<body>
ccc
</body>
</html>

I understand that the contents of the noscript tag should run if a browser is not running javascript.

In chrome or firefox, with no extensions blocking anything, I get the output of bbb ccc. That's fine, that makes sense. 'bbb' shows because javascript is allowed, and ccc shows because it will show whether javascript is enabled or not.

If I install e.g. the uBlock origin extension or if in Firefox I install the NoScript extension(note- the name of that extension is coincidentally the same as the noscript tag), then when I reload the page I mentioned

http://www.zen76171.zen.co.uk/aaa2.html

It shows ccc. That indicates to me that scripts are being blocked (as it didn't show bbb, so that part(not showing bbb, is good.

But the output I would expect is aaa ccc, because I'd expect 'aaa' to show when scripts are disabled, and scripts are disabled.

There is also a secondary problem that I work around, which is that if I disable or even 'remove' the NoScript extension from Firefox, then I still get the same response of 'ccc', I have to uninstall and reinstall Firefox to remove the NoScript extension. But for now that will do when I want to remove the NoScript extension. uBlock Origin has no such issue(don't need to reinstall a browser to remove it!). So if anybody tries to reproduce this problem then I suggest they either use the script blocker they have, or as I have, use uBlock Origin.

Why does it show just 'ccc' and not 'aaa ccc' (when scripts are blocked)?

This is the case with uBlock Origin, or with the NoScript extension. So, it seems, it's with anything that disables scripts.

So, why is the aaa not being displayed ever. I'd think it should be displayed when scripts are disabled.

Wahl answered 1/4, 2019 at 9:38 Comment(4)

You lost formatting of the HTML code in your question. Could you edit the question with the correct formatting for us to help? – Tercel 1/4, 2019 at 9:42

It's working fine with uBlock Origin on my machine (Windows 10 Pro, latest Chrome) – Packthread 1/4, 2019 at 9:49

@EricPPereira yunzen has fixed the formatting, thanks for noting that – Wahl 1/4, 2019 at 9:58

@Packthread so what output do you get? a)with scripts not blocked b)with scripts blocked? – Wahl 1/4, 2019 at 9:59

It only works, if the <noscript> is in the body, not the head. And it's absolutely correct that it behaves like that. Just think of setting any content inside the <head>: it won't get displayed.

Won't work: <noscript> in <head>

<!doctype html>
<html>
<head>
    <noscript>aaa</noscript>
    <script>document.write("bbb")</script>
</head>
<body>
    ccc
</body>
</html>

Tested with latest Chrome and uBlock Origin extension on Windows 10 Pro on this codepen

Will work: <noscript> in <body>

<!doctype html>
<html>
<head>
</head>
<body>
    <noscript>aaa</noscript>
    <script>document.write("bbb")</script>
    ccc
</body>
</html>

Tested with latest Chrome and uBlock Origin extension on Windows 10 Pro on this codepen

Additional

On MDN <noscript> page it says (emphasis mine)

Permitted content: When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements. When scripting is disabled and when it isn't a descendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants. Otherwise: flow content or phrasing content.

So: If in head, only link, meta and style allowed

Packthread answered 1/4, 2019 at 10:5 Comment(4)

thanks this looks like it's right but i'm going to test it! – Wahl 1/4, 2019 at 10:19

I notice that #34231792 it puts noscript in the head – Wahl 1/4, 2019 at 10:20

maybe this is relevant w3schools.com/tags/tag_noscript.asp "When used inside the <head> element: <noscript> must contain only <link>, <style>, and <meta> elements." So, no text, which I guess is what you say in your 'additional'' – Wahl 1/4, 2019 at 10:43

@Wahl I don't regard w3schools content as authoritative in any way. – Packthread 1/4, 2019 at 11:6

Script blocking extensions generally work by blocking the script elements. They don't disable JavaScript support in the browser.

Since the browser itself has JS support enabled, it doesn't render noscript elements.

Use progressive enhancement instead. Start with the content for browsers where the JS doesn't work, then change it with JS.

Array.from(
    document.querySelectorAll(".nojs")
).forEach(
    node => node.remove()
);

<span class="nojs">aaa</span> ccc

Quinze answered 1/4, 2019 at 10:10 Comment(8)

i'm not trying to remove elements and their contents from html – Wahl 1/4, 2019 at 10:18

@Wahl — You're trying to show "aaa" only if the JS doesn't run successfully. – Quinze 1/4, 2019 at 10:19

ah I see so the script removes the tag not the contents – Wahl 1/4, 2019 at 10:24

@Wahl — It removes the contents, but you don't want the contents to show if the JS runs. That was the point of putting them in noscript in the first place. – Quinze 1/4, 2019 at 10:28

ah I see, ok, interesting solution.. Your script solution aside, and regarding your mention about when the contents of noscript elements are rendered, It looks(based on yunzen's answer), like the browser does render noscript when noscript was in the body(and scripts blocked), just never rendered it when in the head – Wahl 1/4, 2019 at 10:29

also(assuming your statement about noscript being in reference to browser level) do you think your method is generally preferable to using noscript tags - like if in most cases one wants to discriminate based on whether scripts can run, regardless of whether it's the browser preventing them, or an extension? – Wahl 1/4, 2019 at 10:40

@Wahl — I'd generally recommend this general approach (along with feature detection) since scripts can fail for all sorts of other reasons (including using features not supported by the browser, having the script URL time out because of network trouble, etc). – Quinze 1/4, 2019 at 10:45

Okay thanks, also worth noting that noscript does operate fine with text in there, when in the body rather than the head, even when it's only a browser extension blocking scripts. So it's not the case that noscript only responds to browser settings level blocking of scripts. – Wahl 1/4, 2019 at 11:55

Additional

Recommended topics

Hot tags