@soleil-se/app-util 4.1.0 → 4.1.2

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.1.2] - 2021-02-24
+### Fixed
+- Escape tags when parsing data to prevent closure of script tags.
+
+## [4.1.1] - 2021-02-17
+### Fixed
+- Validation error for `id` on script tags, even though it's allowed.
+
 ## [4.1.0] - 2021-02-17
 ### Changed
 - Put app data and metadata in script elements instead of data attributes.

package/client/utils/index.js

@@ -1,5 +1,9 @@
 import getCurrentScript from './getCurrentScript';
 
+const unescapeTags = (unsafe) => unsafe
+  .replace(/&lt;/g, '<')
+  .replace(/&gt;/g, '>');
+
 /**
  * JSON decode an attribute on the currentScript element.
  * Use if attribute contains a JSON-object.
@@ -17,5 +21,7 @@ export const getAttribute = (attribute) => {
 
 export const parseJson = (type) => {
   const id = getAttribute('data-app-id');
-  return JSON.parse(document.getElementById(`${type}_${id}`)?.textContent || '{}');
+  let json = document.querySelector(`[data-id="${type}_${id}"]`)?.textContent || '{}';
+  json = unescapeTags(json);
+  return JSON.parse(json);
 };

package/docs/1.render.md

@@ -1,7 +1,10 @@
 # Render
-Returns HTML for a script tag with server data avaliable as attributes on the tag.    
+Returns HTML for a script tag with the possibility to pass data from the server.    
 Framework agnostic.
 
+Server data is embedded as JSON in script tags.   
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html
+
 ## index.js
 ### render([data], [settings]) ⇒ <code>String</code>
 `@soleil-api/webapp-util/server`  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Utility functions for Webapps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
@@ -14,7 +14,7 @@
   "optionalDependencies": {
     "vue": "^2.6.11"
   },
-  "gitHead": "5248563f9ecdec86866cb5cd361990c5ff8626a5",
+  "gitHead": "810b8ad5ceb960a03f7af40052b663b444763794",
   "dependencies": {},
   "devDependencies": {}
 }

package/server/index.js

@@ -12,6 +12,10 @@ const isIE = (req) => {
   return /Trident\/|MSIE/.test(userAgent);
 };
 
+const escapeTags = (unsafe) => unsafe
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;');
+
 /**
  * Get a HTML string for rendering an application.
  * @param {Object} [data={}] Server data that will be available in the attribute.
@@ -36,8 +40,8 @@ export function render(data, {
   const appMetadata = getAppMetadata();
 
   const mountElement = `<div id="app_mount_${appId}">${html}</div>`;
-  const metaScriptTag = `<script id="app_meta_${appId}" type="application/json">${JSON.stringify(appMetadata)}</script>`;
-  const dataScriptTag = data ? `<script id="app_data_${appId}" type="application/json">${JSON.stringify(data)}</script>` : '';
+  const metaScriptTag = `<script data-id="app_meta_${appId}" type="application/json">${JSON.stringify(appMetadata)}</script>`;
+  const dataScriptTag = data ? `<script data-id="app_data_${appId}" type="application/json">${escapeTags(JSON.stringify(data))}</script>` : '';
 
   if (isOffline) {
     return `