Skip to content

Commit 08ba618

Browse files
author
Daniel Tonon
committed
Merge branch 'issue-#6-Safari-CSP-error' into master
2 parents c21a62d + 8fa3601 commit 08ba618

16 files changed

+933
-529
lines changed

README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,3 +123,37 @@ export const TimeInput = ({ label, currentValue, onInputChange }) => {
123123
)
124124
}
125125
```
126+
127+
## Content Security Policy (CSP) work around
128+
129+
The way that the polyfill avoids downloading the full polyfill code in modern browsers is by injecting the following script tag onto the page:
130+
131+
```html
132+
<script src="https://cdn.jsdelivr.net/npm/react-time-input-polyfill@1/dist/timePolyfillHelpers.js"></script>
133+
```
134+
135+
That downloads the extra helper functions that the polyfill needs to function.
136+
137+
Your CSP might not allow for this.
138+
139+
To work around the issue, first create a `timePolyfillHelpers.js` file and ensure that whatever you are using to compile your JS also compiles this file as it's own separate thing. Don't import it into your main js file.
140+
141+
```js
142+
// timePolyfillHelpers.js
143+
144+
// ES5
145+
require('react-time-input-polyfill/timePolyfillHelpers.js')
146+
147+
// ES6
148+
import 'react-time-input-polyfill/timePolyfillHelpers.js'
149+
```
150+
151+
Then when using the component, add a `polyfillSource` prop that points to the compiled helpers file on your server.
152+
153+
```jsx
154+
<TimeInput
155+
value={currentValue}
156+
onChange={({ value }) => setCurrentValue(value)}
157+
polyfillSource="/path/to/timePolyfillHelpers.js"
158+
/>
159+
```

dist/timePolyfillHelpers.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/asset-manifest.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
22
"files": {
33
"main.css": "/react-time-input-polyfill/static/css/main.2743c8fd.chunk.css",
4-
"main.js": "/react-time-input-polyfill/static/js/main.f0da9f91.chunk.js",
5-
"main.js.map": "/react-time-input-polyfill/static/js/main.f0da9f91.chunk.js.map",
4+
"main.js": "/react-time-input-polyfill/static/js/main.03077436.chunk.js",
5+
"main.js.map": "/react-time-input-polyfill/static/js/main.03077436.chunk.js.map",
66
"runtime-main.js": "/react-time-input-polyfill/static/js/runtime-main.c87944e3.js",
77
"runtime-main.js.map": "/react-time-input-polyfill/static/js/runtime-main.c87944e3.js.map",
88
"static/js/2.7acf07de.chunk.js": "/react-time-input-polyfill/static/js/2.7acf07de.chunk.js",
99
"static/js/2.7acf07de.chunk.js.map": "/react-time-input-polyfill/static/js/2.7acf07de.chunk.js.map",
1010
"index.html": "/react-time-input-polyfill/index.html",
11-
"precache-manifest.4f3e04b9ba9f8c07accdf6ee7315b4d0.js": "/react-time-input-polyfill/precache-manifest.4f3e04b9ba9f8c07accdf6ee7315b4d0.js",
11+
"precache-manifest.6432c87ab3a1d71b5eabc5de5e9d5e31.js": "/react-time-input-polyfill/precache-manifest.6432c87ab3a1d71b5eabc5de5e9d5e31.js",
1212
"service-worker.js": "/react-time-input-polyfill/service-worker.js",
1313
"static/css/main.2743c8fd.chunk.css.map": "/react-time-input-polyfill/static/css/main.2743c8fd.chunk.css.map"
1414
},
1515
"entrypoints": [
1616
"static/js/runtime-main.c87944e3.js",
1717
"static/js/2.7acf07de.chunk.js",
1818
"static/css/main.2743c8fd.chunk.css",
19-
"static/js/main.f0da9f91.chunk.js"
19+
"static/js/main.03077436.chunk.js"
2020
]
2121
}

0 commit comments

Comments
 (0)