javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [input] refused to apply inline style because it violates csp (#19541)

Browse Source 
fix(components): [input] CSP support #15065

`element.setAttribute('style', 'css code')` violate Content Security Policy (CSP)
using `element.style.setProperty()` instead
This commit is contained in:
Mark J
2025-01-24 15:05:10 +08:00
committed by GitHub
parent 38dcbf0f13
commit fbbb50a9b2
1 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/components/input/src/utils.ts
View File

@@ -2,15 +2,15 @@ import { isFirefox, isNumber } from '@element-plus/utils'
let hiddenTextarea: HTMLTextAreaElement | undefined = undefined
const HIDDEN_STYLE = `
height:0 !important;
visibility:hidden !important;
${isFirefox() ? '' : 'overflow:hidden !important;'}
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important;
`
const HIDDEN_STYLE = {
height: '0',
visibility: 'hidden',
overflow: isFirefox() ? '' : 'hidden',
position: 'absolute',
'z-index': '-1000',
top: '0',
right: '0',
}
const CONTEXT_STYLE = [
'letter-spacing',
@@ -31,7 +31,7 @@ const CONTEXT_STYLE = [
]
type NodeStyle = {
contextStyle: string
contextStyle: string[][]
boxSizing: string
paddingSize: number
borderSize: number
@@ -55,9 +55,10 @@ function calculateNodeStyling(targetElement: Element): NodeStyle {
Number.parseFloat(style.getPropertyValue('border-bottom-width')) +
Number.parseFloat(style.getPropertyValue('border-top-width'))
const contextStyle = CONTEXT_STYLE.map(
(name) => `${name}:${style.getPropertyValue(name)}`
).join(';')
const contextStyle = CONTEXT_STYLE.map((name) => [
name,
style.getPropertyValue(name),
])
return { contextStyle, paddingSize, borderSize, boxSizing }
}
@@ -75,7 +76,14 @@ export function calcTextareaHeight(
const { paddingSize, borderSize, boxSizing, contextStyle } =
calculateNodeStyling(targetElement)
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)
contextStyle.forEach(([key, value]) =>
hiddenTextarea?.style.setProperty(key, value)
)
Object.entries(HIDDEN_STYLE).forEach(([key, value]) =>
hiddenTextarea?.style.setProperty(key, value, 'important')
)
hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''
let height = hiddenTextarea.scrollHeight