GCWeb
GCWeb copied to clipboard
wet-boew
Bug - Unable to add style or link tags
Describe the bug
My application JavaScript is trying to add a <style> tag to the <head> using jQuery, but the DOM is never updated.
To Reproduce
Steps to reproduce the behaviour:
- Open the test HTML in the example
- Click on the page
- Open the browser console and see that it's
undefined
Example
<html lang="en" dir="ltr">
<head>
<title>Test style update</title>
</head>
<body vocab="http://schema.org/" typeof="WebPage">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<span id="wb-rsz" class="wb-init"> </span>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/js/theme.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
$(document).on('click', function() {
const $style = $("<style type='text/css' rel='stylesheet' />").appendTo($('head'))
console.log(`Should not be undefined -> ${$style[0]}`)
})
})
})(jQuery)
</script>
</body>
</html>
Removing the wet-boew.min.js and theme.min.js inclusions fixes it:
<html lang="en" dir="ltr">
<head>
<title>Test style update</title>
</head>
<body vocab="http://schema.org/" typeof="WebPage">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
$(document).on('click', function() {
const $style = $("<style type='text/css' rel='stylesheet' />").appendTo($('head'))
console.log(`Should not be undefined -> ${$style[0]}`)
})
})
})(jQuery)
</script>
</body>
</html>
Current behaviour
The new jQuery object exists ($style above), but the underlying DOM is never appended. Using the [0] or .get() API should return the new underlying plain DOM object. This currently happens for a <style /> or <link /> tag trying to be added. Adding a <div /> tag works.
Expected behaviour
The DOM should be updated as described by the code above.
Screenshots and/or logs
Desktop (please complete the following information):
- OS: MacOS Monterey
- Browser: [chrome:96, safari:15.1]
Smartphone (please complete the following information):
Additional context
Using vanilla JavaScript works.
@at88mph this is because since Nov 18 with the release of GCWeb v10.0.0 (compiled with WET v4.0.44) we have patched jQuery for security issue and any HTML going through jQuery are sanitized with DOM purify - https://github.com/cure53/DOMPurify/
An alternative will be for you to use vanilla javascript and the DOM API like:
document.querySelector( "head" ).appendChild( )
