Merge pull request #223 from briantrice/fix/security-csp-style-src

Fix/security csp style src

Author: wwayne

Makefile

@@ -30,6 +30,7 @@ devJS:
 
 devCSS:
 	@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
+	@$(NODE_BIN)/node-sass $(SRC)/index.scss $(EXAMPLE_DIST)/style.css
 	@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
 
 devServer:

README.md

@@ -60,6 +60,7 @@ class	|   data-class  |  String  |   | extra custom class, can use !important to
  html	|   data-html  |  Bool  |  true, false  |  `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
  delayHide	|   data-delay-hide  |  Number  |   | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
  delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
+ insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
  getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
  afterShow | null | Func | () => {} | Function that will be called after tooltip show

bin/transferSass.js

@@ -11,12 +11,19 @@ function transferSass () {
       console.log(err)
       return
     }
-    fs.writeFile(path.resolve(__dirname, '../src/style.js'), "export default '" + result.css.toString().replace(/\n/g, '') + "'", function (err) {
+    var cssSource = result.css.toString()
+    fs.writeFile(path.resolve(__dirname, '../src/style.js'), "export default '" + cssSource.replace(/\n/g, '') + "'", function (err) {
       if (err) {
         console.error(err)
       }
-      console.log('css file has been transformed successful')
-      process.exit()
+      console.log('css file has been transformed to JS successful')
+      fs.writeFile(path.resolve(__dirname, '../src/style.css'), cssSource, function (err) {
+        if (err) {
+          console.error(err)
+        }
+        console.log('css file has been transformed successful')
+        process.exit()
+      })
     })
   })
 }

package.json

@@ -14,6 +14,7 @@
       "dist/",
       "standalone/",
       "src/style.js",
+      "src/style.css",
       "example/"
     ]
   },

src/index.js

@@ -29,6 +29,7 @@ class ReactTooltip extends Component {
     offset: PropTypes.object,
     multiline: PropTypes.bool,
     border: PropTypes.bool,
+    insecure: PropTypes.bool,
     class: PropTypes.string,
     id: PropTypes.string,
     html: PropTypes.bool,
@@ -48,6 +49,7 @@ class ReactTooltip extends Component {
   };
 
   static defaultProps = {
+    insecure: true,
     resizeHide: true
   };
 
@@ -100,9 +102,12 @@ class ReactTooltip extends Component {
   }
 
   componentDidMount () {
-    this.setStyleHeader() // Set the style to the <link>
+    const { insecure, resizeHide } = this.props
+    if (insecure) {
+      this.setStyleHeader() // Set the style to the <link>
+    }
     this.bindListener() // Bind listener for tooltip
-    this.bindWindowEvents(this.props.resizeHide) // Bind global event for static method
+    this.bindWindowEvents(resizeHide) // Bind global event for static method
   }
 
   componentWillReceiveProps (props) {