Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

React Helmet 介紹

特色

可以在很深層的 React components 放 head 應該要出現的東西,只要用 Helmet 包起來,它就自動幫你放進 head

注意事項:不能把 custom component 放進 Helmet 作為 children

https://github.com/nfl/react-helmet/issues/405

例如:

<Helmet>
  <CustomComponent />
</Helmet>
  • 會得到錯誤訊息 Helmet.js You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.

  • 而且 Helmet 不會去幫你 render 裡面的 custom components,DevTool 找不到我要的東西

其實 Helmet 會去檢查 children 的 type 是不是 function,如果是的話給 warning,而且不會 render 該 function

學到的事情

  1. Helmet 底下只能放 html tags,不能給 custom components
  2. warning 訊息可以拿去 source code 搜尋,找到它發 warning 的機制。例如這個例子是他會去檢查 child.type === "function"

相關

遇到錯誤的策略 Bug Fixing Strategy

Part2

  • Helmet 的 render 方法是直接設 innerHTML (no escape),和 React 很不一樣

  • React 會幫你 escape [>, <, ', ", &] 這些字串來防止 XSS 攻擊,他會幫你 replace 這些字串成 HTML Entities (除了 components 的 <>),只有 dangerouslySetInnerHTML 才不會 escape、直接設 innerHTML

  • 攻擊方法:先把前面的 script 關起來,再開一個自己的 script 寫 XSS 攻擊式

  • 如果 lng 可控:

  • <StructureData data={structureDataLogo('