Symbol();
Symbol.for(); // Symbol과 달리 전역으로 존재하는 global symbol table 참조
Symbol.iterator; // iterator 객체를 정의하기 위해 쓰인다.
obj[Symbol.iterator] = function* {}
Symbol.for를 더 자세히 알아볼까요?
var ob = {};
var a = Symbol.for("key");
var b = Symbol.for("key");
ob[a] = 20;
console.log(ob[b] === 20);
이렇게 Symbol.for 로 생성한 Symbol은 같은 'key'로 만든 Symbol과 같다는 것을 알 수 있습니다.
Symbol의 private한 성질
Symbol 속성은 열거형 속성이 아니기 때문에 for of 이나 Object.keys 때 찾을 수 없습니다.
Symbol 속성을 찾을 때는 Object.getOwnPropertySymbols 로 찾아야 합니다.
또한 JSON.stringify() 에서도 무시됩니다.
var ob = {
[Symbol("a")]: 10,
[Symbol("b")]: 20,
};
Object.getOwnPropertySymbols(ob);
// [Symbol(a), Symbol(b)]
Object.keys(ob);
// []
for (var i in ob) {
console.log(i);
}
// 반환값 없음
JSON.stringify(ob);
// "{}"
React 와 Symbol
JSX 문법으로 태그를 생성할 때 실제로는 함수가 호출됩니다.
<marquee bgcolor="#ffa7c4">hi</marquee>;
React.createElement(
/* type */ "marquee",
/* props */ { bgcolor: "#ffa7c4" },
/* children */ "hi"
);
그러나 이러한 이스케이핑 방법은 완전히 안전하지 않습니다. 대부분의 공격은 속성(attributes)을 통해 이루어집니다.
만약 서버에서 받은 message.text의 정보가 JSON인 경우 어떻게할까요??
만약 당신의 서버에 구멍이 생겨, (원래는 문자열로 입력을 받아야 하는데) 유저가 임의의 JSON 객체를 서버에 저장할 수 있는 문제가 발생했다고 하자. 클라이언트 쪽 코드에선 당연히 해당 정보를 문자열로 받게끔 설계되어 있을테니 문제가 발생하게 된다
// 서버에 구멍이 생겨 JSON이 저장되었다고 가정하자.
let expectedTextButGotJSON = {
type: "div",
props: {
dangerouslySetInnerHTML: {
__html: "/* put your exploit here */",
},
},
// ...
};
let message = { text: expectedTextButGotJSON };
// React 0.13에서 이는 위험할 수 있다.
<p>{message.text}</p>;
이 문제를 해결하기 위해 '모든 React element에 Symbol 태그'를 달았습니다.
