Избегайте уязвимостей межсайтового скриптинга в стиле htmlSafe () - PullRequest
Новая
       56

Избегайте уязвимостей межсайтового скриптинга в стиле htmlSafe ()

0 голосов
/ 07 мая 2020

Hej Я новичок (i sh) в ember. js и пытаюсь создать вспомогательную функцию, которая обрабатывает строковый ввод из поля ввода ACF в wordpress. Попытка состоит в том, чтобы избежать получения предупреждающего сообщения от браузера о XSS-атаках. Проще говоря: цель состоит в том, чтобы иметь возможность создавать цвета и градиентные изменения дизайна с помощью клиентской cms. Тем не мение; даже если строка легко проходит через помощника и производит желаемый эффект новой, предположительно безопасной, строки html. Я все еще получаю предупреждение.

фрагменты кода здесь: из помощника в app / helpers 

import {helper} from '@ember/component/helper'
import Ember from 'ember';
import { htmlSafe } from '@ember/string'
const htmlEscape = Ember.Handlebars.Utils.escapeExpression;

export function escapeCSS(string) {
    let safestring = htmlEscape(string);    
    return htmlSafe(safestring);
}

export default helper(escapeCSS)

из шаблона 

<div style="background-image:linear-gradient({{escapeCSS model.page.acf.top_color}}, {{escapeCSS model.page.acf.bottom_color}})" class="/homepage"></div>

Ответы [ 2 ]

0 голосов
/ 22 мая 2020

Динамическое создание атрибута style рискованно. Эмбер пытается этого избежать. Я не уверен, что пометка строки как HTML в любом случае поможет. Я рекомендую вам не создавать атрибут style самостоятельно, а устанавливать стили CSS с помощью CSSOM. ember-style-modifier предоставляет декларативный способ сделать это.

Отказ от ответственности: я являюсь автором надстройки ember-style-modifier.

0 голосов
/ 07 мая 2020

Хорошие новости! Кто-то это уже написал. См. https://github.com/romulomachado/ember-cli-string-helpers#html -safe

. Если вы хотите, чтобы помощник также избегал вашего css, вы можете использовать его. Исходный код находится здесь:

https://github.com/romulomachado/ember-cli-string-helpers/blob/master/addon/helpers/html-safe.js

Я все это сделал: 

import { helper } from '@ember/component/helper';
import { htmlSafe, isHTMLSafe } from '@ember/string';

function escapeCss([stringToEscape]) {
  let cssEscapedString = CSS.escape(stringToEscape);
  let htmlSafeString = htmlSafe(cssEscapedString);
  return htmlSafeString;
}

// copied from https://github.com/romulomachado/ember-cli-string-helpers/blob/master/addon/-private/create-string-helper.js

function wrapFunction(stringFunction) {
  return function([string]) {
    if (isHTMLSafe(string)) {
      string = string.string;
    }

    string = string || '';
    return stringFunction([string]);
  };
}

export default helper(wrapFunction(escapeCss));

Вы можете увидеть демонстрацию здесь : https://ember-twiddle.com/19f3d8baa3fff404191d5ac3862355a9?openFiles=helpers.escape-css%5C.js%2C

...