Sweetalert: ๋‹ฌ์ฝคํ•œ ๊ฒฝ๊ณ ์— ํ•˜์ดํผ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์—†์Œ

์— ๋งŒ๋“  2018๋…„ 06์›” 27์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: t4t5/sweetalert

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„,
์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ํ…์ŠคํŠธ์— ํ•˜์ดํผ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.
swal({ title: 'This is the ', text: '<a href="http://www.externalwebsite.com" target="_blank">externalwebsite.com</a>', html: true, showCancelButton: true, allowOutsideClick: true, goToExternal: true, externalUrl: 'http://www.externalwebsite.com', confirmButtonText: "Continue" });

๊ทธ๋Ÿฐ๋ฐ ์ œ๋Œ€๋กœ ๋‚˜์˜ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ์˜ค๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค

screenshot_32

๋‹ฌ์ฝคํ•œ ๊ฒฝ๊ณ  ์•ˆ์— ์•ต์ปค ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๊ฐ์‚ฌ ํ•ด์š”
์•„๋””

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๋ด,

html ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ๋น„ํ™œ์„ฑํ™”๋œ ์ด์œ ๋Š” ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ž ์žฌ์ ์œผ๋กœ XSS ๊ณต๊ฒฉ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋‹ค์Œ๊ณผ ๊ฐ™์ด DOM ๋…ธ๋“œ๋ฅผ content ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•˜์—ฌ ์›์‹œ HTML์„ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})

๋ชจ๋“  4 ๋Œ“๊ธ€

https://sweetalert.js.org/guides/#upgrading -from-1x
html์€ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ์ฝ˜ํ…์ธ  ๊ฐœ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

์•ˆ๋…•ํ•˜์„ธ์š” @SergeyW ,
๋‹ต์žฅ์„ ๋ณด๋‚ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋„ค, ์ œ๊ฐ€ ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ์กฐ๊ธˆ ์กฐ์‚ฌํ–ˆ์„ ๋•Œ, ์ €๋„ ๊ฐ™์€ ๊ฒƒ์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋ถˆํ–‰ํžˆ๋„ ์ฝ˜ํ…์ธ  ๊ฐœ์ฒด๊ฐ€ ์žˆ๋Š” ๊ฒฝ๊ณ  ์ƒ์ž์—๋„ ํ•˜์ดํผ๋งํฌ๋ฅผ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์˜ˆ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ๊ณ  ๊ทธ ์ค‘ ๋งŽ์€ ๊ฒƒ์„ ์–ป์—ˆ์ง€๋งŒ ๋ชจ๋‘ HTML ์–‘์‹ ์š”์†Œ, ๋ฒ„ํŠผ ๋“ฑ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์— ๊ด€ํ•œ ๊ฒƒ์ด๊ณ  ํ•˜์ดํผ๋งํฌ๋‚˜ ์•ต์ปค ํƒœ๊ทธ์— ๊ด€ํ•œ ๊ฒƒ์€ ์—†์Šต๋‹ˆ๋‹ค.
์•ต์ปค ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ฃผ๊ฑฐ๋‚˜ ์ด์™€ ์œ ์‚ฌํ•œ ๋ช‡ ๊ฐ€์ง€ ์˜ˆ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ์‚ฌ ํ•ด์š”
์•„๋””

์ด๋ด,

html ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ๋น„ํ™œ์„ฑํ™”๋œ ์ด์œ ๋Š” ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ž ์žฌ์ ์œผ๋กœ XSS ๊ณต๊ฒฉ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋‹ค์Œ๊ณผ ๊ฐ™์ด DOM ๋…ธ๋“œ๋ฅผ content ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ „๋‹ฌํ•˜์—ฌ ์›์‹œ HTML์„ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @t4t5

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰