78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
|
/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var CSSProperty = require('./CSSProperty');
|
||
|
|
var warning = require('fbjs/lib/warning');
|
||
|
|
|
||
|
|
var isUnitlessNumber = CSSProperty.isUnitlessNumber;
|
||
|
|
var styleWarnings = {};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Convert a value into the proper css writable value. The style name `name`
|
||
|
|
* should be logical (no hyphens), as specified
|
||
|
|
* in `CSSProperty.isUnitlessNumber`.
|
||
|
|
*
|
||
|
|
* @param {string} name CSS property name such as `topMargin`.
|
||
|
|
* @param {*} value CSS property value such as `10px`.
|
||
|
|
* @param {ReactDOMComponent} component
|
||
|
|
* @return {string} Normalized style value with dimensions applied.
|
||
|
|
*/
|
||
|
|
function dangerousStyleValue(name, value, component) {
|
||
|
|
// Note that we've removed escapeTextForBrowser() calls here since the
|
||
|
|
// whole string will be escaped when the attribute is injected into
|
||
|
|
// the markup. If you provide unsafe user data here they can inject
|
||
|
|
// arbitrary CSS which may be problematic (I couldn't repro this):
|
||
|
|
// https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
|
||
|
|
// http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
|
||
|
|
// This is not an XSS hole but instead a potential CSS injection issue
|
||
|
|
// which has lead to a greater discussion about how we're going to
|
||
|
|
// trust URLs moving forward. See #2115901
|
||
|
|
|
||
|
|
var isEmpty = value == null || typeof value === 'boolean' || value === '';
|
||
|
|
if (isEmpty) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
var isNonNumeric = isNaN(value);
|
||
|
|
if (isNonNumeric || value === 0 || isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
|
||
|
|
return '' + value; // cast to string
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof value === 'string') {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
// Allow '0' to pass through without warning. 0 is already special and
|
||
|
|
// doesn't require units, so we don't need to warn about it.
|
||
|
|
if (component && value !== '0') {
|
||
|
|
var owner = component._currentElement._owner;
|
||
|
|
var ownerName = owner ? owner.getName() : null;
|
||
|
|
if (ownerName && !styleWarnings[ownerName]) {
|
||
|
|
styleWarnings[ownerName] = {};
|
||
|
|
}
|
||
|
|
var warned = false;
|
||
|
|
if (ownerName) {
|
||
|
|
var warnings = styleWarnings[ownerName];
|
||
|
|
warned = warnings[name];
|
||
|
|
if (!warned) {
|
||
|
|
warnings[name] = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!warned) {
|
||
|
|
process.env.NODE_ENV !== 'production' ? warning(false, 'a `%s` tag (owner: `%s`) was passed a numeric string value ' + 'for CSS property `%s` (value: `%s`) which will be treated ' + 'as a unitless number in a future version of React.', component._currentElement.type, ownerName || 'unknown', name, value) : void 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
value = value.trim();
|
||
|
|
}
|
||
|
|
return value + 'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = dangerousStyleValue;
|