From 61cdbb65d360b593527393478bd5aa6f8e9a3519 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Tue, 19 Sep 2023 17:01:14 +0200 Subject: [PATCH] chore: Setting style property to make CSP less grumpy. (#7503) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Setting style property to make CSP less grumpy. "Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)." The 'style' property should be set as an object, not as a string, according to CSP rules. Back-ported from Blockly Games. --- core/field_angle.ts | 2 +- core/flyout_base.ts | 2 +- core/renderers/common/marker_svg.ts | 7 +++---- core/renderers/zelos/marker_svg.ts | 2 +- core/utils/dom.ts | 5 ++++- demos/blockfactory/workspacefactory/wfactory_generator.js | 4 ++-- tests/playgrounds/screenshot.js | 2 +- 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/core/field_angle.ts b/core/field_angle.ts index b04624691..e65ef16a9 100644 --- a/core/field_angle.ts +++ b/core/field_angle.ts @@ -219,8 +219,8 @@ export class FieldAngle extends FieldInput { 'version': '1.1', 'height': FieldAngle.HALF * 2 + 'px', 'width': FieldAngle.HALF * 2 + 'px', - 'style': 'touch-action: none', }); + svg.style.touchAction = 'none'; const circle = dom.createSvgElement( Svg.CIRCLE, { diff --git a/core/flyout_base.ts b/core/flyout_base.ts index c9b822492..bb30a45cb 100644 --- a/core/flyout_base.ts +++ b/core/flyout_base.ts @@ -340,8 +340,8 @@ export abstract class Flyout extends DeleteArea implements IFlyout { // hide/show code will set up proper visibility and size later. this.svgGroup_ = dom.createSvgElement(tagName, { 'class': 'blocklyFlyout', - 'style': 'display: none', }); + this.svgGroup_.style.display = 'none'; this.svgBackground_ = dom.createSvgElement( Svg.PATH, {'class': 'blocklyFlyoutBackground'}, diff --git a/core/renderers/common/marker_svg.ts b/core/renderers/common/marker_svg.ts index 728832f8c..5581dc317 100644 --- a/core/renderers/common/marker_svg.ts +++ b/core/renderers/common/marker_svg.ts @@ -641,7 +641,6 @@ export class MarkerSvg { { 'width': this.constants_.CURSOR_WS_WIDTH, 'height': this.constants_.WS_CURSOR_HEIGHT, - 'style': 'display: none', }, this.markerSvg_, ); @@ -653,7 +652,6 @@ export class MarkerSvg { 'class': 'blocklyVerticalMarker', 'rx': 10, 'ry': 10, - 'style': 'display: none', }, this.markerSvg_, ); @@ -661,7 +659,7 @@ export class MarkerSvg { // A filled in puzzle piece used to represent an input value. this.markerInput_ = dom.createSvgElement( Svg.PATH, - {'transform': '', 'style': 'display: none'}, + {'transform': ''}, this.markerSvg_, ); @@ -671,13 +669,14 @@ export class MarkerSvg { Svg.PATH, { 'transform': '', - 'style': 'display: none', 'fill': 'none', 'stroke-width': this.constants_.CURSOR_STROKE_WIDTH, }, this.markerSvg_, ); + this.hide(); + // Markers and stack markers don't blink. if (this.isCursor()) { const blinkProperties = this.getBlinkProperties_(); diff --git a/core/renderers/zelos/marker_svg.ts b/core/renderers/zelos/marker_svg.ts index bda30907d..4805e264b 100644 --- a/core/renderers/zelos/marker_svg.ts +++ b/core/renderers/zelos/marker_svg.ts @@ -116,11 +116,11 @@ export class MarkerSvg extends BaseMarkerSvg { Svg.CIRCLE, { 'r': this.constants_.CURSOR_RADIUS, - 'style': 'display: none', 'stroke-width': this.constants_.CURSOR_STROKE_WIDTH, }, this.markerSvg_, ); + this.hide(); // Markers and stack cursors don't blink. if (this.isCursor()) { diff --git a/core/utils/dom.ts b/core/utils/dom.ts index 0d05a6bf8..e9efca9f8 100644 --- a/core/utils/dom.ts +++ b/core/utils/dom.ts @@ -353,7 +353,10 @@ export function measureFontMetrics( block.style.height = '0'; const div = document.createElement('div'); - div.setAttribute('style', 'position: fixed; top: 0; left: 0; display: flex;'); + div.style.display = 'flex'; + div.style.position = 'fixed'; + div.style.top = '0'; + div.style.left = '0'; div.appendChild(span); div.appendChild(block); diff --git a/demos/blockfactory/workspacefactory/wfactory_generator.js b/demos/blockfactory/workspacefactory/wfactory_generator.js index ca1a47b09..9f115c40b 100644 --- a/demos/blockfactory/workspacefactory/wfactory_generator.js +++ b/demos/blockfactory/workspacefactory/wfactory_generator.js @@ -45,7 +45,7 @@ WorkspaceFactoryGenerator.prototype.generateToolboxXml = function() { // Create DOM for XML. var xmlDom = Blockly.utils.xml.createElement('xml'); xmlDom.id = 'toolbox'; - xmlDom.setAttribute('style', 'display: none'); + xmlDom.style.display = 'none'; if (!this.model.hasElements()) { // Toolbox has no categories. Use XML directly from workspace. @@ -111,7 +111,7 @@ WorkspaceFactoryGenerator.prototype.generateWorkspaceXml = function() { // Generate XML and set attributes. var xmlDom = Blockly.Xml.workspaceToDom(this.hiddenWorkspace); xmlDom.id = 'workspaceBlocks'; - xmlDom.setAttribute('style', 'display: none'); + xmlDom.style.display = 'none'; return xmlDom; }; diff --git a/tests/playgrounds/screenshot.js b/tests/playgrounds/screenshot.js index 6768694f1..af20f9d52 100644 --- a/tests/playgrounds/screenshot.js +++ b/tests/playgrounds/screenshot.js @@ -84,7 +84,7 @@ function workspaceToSvg_(workspace, callback, customCss) { ); svg.setAttribute('width', width); svg.setAttribute('height', height); - svg.setAttribute('style', 'background-color: transparent'); + svg.style.backgroundColor = 'transparent'; const css = [].slice .call(document.head.querySelectorAll('style'))