fix: solve error in sensible CSP environment #106

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 2.0.1 (XX Feb 2023)
 * feature: preserve Exif metadata for JPEG [#164](https://github.com/Donaldcwl/browser-image-compression/issues/164)
+* optimized: solved error in sensible CSP environment [#106](https://github.com/Donaldcwl/browser-image-compression/issues/106)
 * fixed: export Options interface [#157](https://github.com/Donaldcwl/browser-image-compression/issues/157)
 * fixed: black image output on iOS devices [#169](https://github.com/Donaldcwl/browser-image-compression/issues/169), [#165](https://github.com/Donaldcwl/browser-image-compression/issues/165), [#166](https://github.com/Donaldcwl/browser-image-compression/issues/166)
 

README.md

@@ -120,6 +120,7 @@ const options: Options = {
                                 // Please check the Caveat part for details.
   onProgress: Function,         // optional, a function takes one progress argument (percentage from 0 to 100) 
   useWebWorker: boolean,        // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
+  libURL: string,               // optional, the libURL of this library for importing script in Web Worker (default: https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js)
   preserveExif: boolean,        // optional, use preserve Exif metadata for JPEG image e.g., Camera model, Focal length, etc (default: false)
 
   signal: AbortSignal,          // options, to abort / cancel the compression
@@ -178,6 +179,7 @@ imageCompression.drawImageInCanvas(img: HTMLImageElement, fileType?: string): HT
 imageCompression.drawFileInCanvas(file: File, options?: Options): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
 imageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>
 imageCompression.getExifOrientation(file: File): Promise<number> // based on https://stackoverflow.com/a/32490603/10395024
+imageCompression.copyExifWithoutOrientation(copyExifFromFile: File, copyExifToFile: File): Promise<File> // based on https://gist.github.com/tonytonyjan/ffb7cd0e82cb293b843ece7e79364233
 ```
 
 
@@ -207,6 +209,14 @@ The browser needs to support "OffscreenCanvas" API in order to take advantage of
 Typescript definitions are included in the package & referenced in the `types` section of the `package.json`
 
 
+## Remarks on Content Security Policy (CSP)
+If your website has CSP enabled and you want to use Web Worker (useWebWorker: true), please add the following to the response header
+`content-security-policy: script-src 'self' blob: https://cdn.jsdelivr.net`
+
+- `blob:` is for loading Web Worker script
+- `https://cdn.jsdelivr.net` is for importing this library from CDN inside Web Worker script. If you don't want to load this library from CDN, you can set your self hosted library URL in `options.libURL`.
+
+
 ## Contribution
 1. fork the repo and git clone it
 2. run `npm run watch` # it will watch code change in lib/ folder and generate js in dist/ folder

example/basic.html

@@ -7,6 +7,7 @@
   </div>
   browser-image-compression@<span id="version">loading...</span>
   <select onchange="changeVersion(event)">
+    <option value="2.0.1">2.0.1</option>
     <option value="2.0.0">2.0.0</option>
     <option value="1.0.17">1.0.17</option>
     <option value="1.0.16">1.0.16</option>
@@ -100,10 +101,12 @@
   <script type="text/javascript"
     src="https://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js"></script>
   <script>
+    let selectedVersion = 'latest'
     function changeVersion(event) {
       document.querySelector("#version").innerHTML = 'loading...';
       const script = document.createElement('script');
-      script.src = "https://cdn.jsdelivr.net/npm/browser-image-compression@"+event.srcElement.value+"/dist/browser-image-compression.js";
+      selectedVersion = event.srcElement.value
+      script.src = "https://cdn.jsdelivr.net/npm/browser-image-compression@"+selectedVersion+"/dist/browser-image-compression.js";
       document.body.appendChild(script);
       script.addEventListener('load', () => {
         document.querySelector("#version").innerHTML = imageCompression.version;
@@ -140,6 +143,8 @@
         ),
         useWebWorker: useWebWorker,
         onProgress: onProgress,
+        preserveExif: true,
+        libURL: "https://cdn.jsdelivr.net/npm/browser-image-compression@"+selectedVersion+"/dist/browser-image-compression.js"
       };
       if (controller) {
         options.signal = controller.signal;

example/development.html

@@ -122,6 +122,7 @@
         useWebWorker: useWebWorker,
         onProgress: onProgress,
         preserveExif: true,
+        libURL: location.origin + '/dist/browser-image-compression.js'
       };
       if (controller) {
         options.signal = controller.signal;

lib/index.d.ts

@@ -25,6 +25,8 @@ export interface Options {
     signal?: AbortSignal;
     /** @default false */
     preserveExif?: boolean;
+    /** @default https://cdn.jsdelivr.net/npm/browser-image-compression/dist/browser-image-compression.js */
+    libURL?: string;
 }
 
 declare function imageCompression(image: File, options: Options): Promise<File>;

lib/index.js

@@ -35,6 +35,7 @@ import compressOnWebWorker from './web-worker';
  * @param {boolean} [options.alwaysKeepResolution=false]
  * @param {AbortSignal} [options.signal]
  * @param {boolean} [options.preserveExif] - preserve Exif metadata
+ * @param {string} [options.libURL] - URL to this library
  * @returns {Promise<File | Blob>}
  */
 async function imageCompression(file, options) {
@@ -75,6 +76,7 @@ async function imageCompression(file, options) {
   if (useWebWorker && typeof Worker === 'function' && !inWebWorker) {
     try {
       // "compressOnWebWorker" is kind of like a recursion to call "imageCompression" again inside web worker
+      opts.libURL = opts.libURL || `https://cdn.jsdelivr.net/npm/browser-image-compression@${__buildVersion__}/dist/browser-image-compression.js`;
       compressedFile = await compressOnWebWorker(file, opts);
     } catch (e) {
       if (process.env.BUILD === 'development') {

lib/utils.js

@@ -3,11 +3,12 @@ import MAX_CANVAS_SIZE from './config/max-canvas-size';
 import BROWSER_NAME from './config/browser-name';
 
 const isBrowser = typeof window !== 'undefined'; // change browser environment to support SSR
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 
 // add support for cordova-plugin-file
 const moduleMapper = isBrowser && window.cordova && window.cordova.require && window.cordova.require('cordova/modulemapper');
-export const CustomFile = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'File')) || (typeof window.File !== 'undefined' && File));
-export const CustomFileReader = isBrowser && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'FileReader')) || (typeof window.FileReader !== 'undefined' && FileReader));
+export const CustomFile = (isBrowser || inWebWorker) && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'File')) || (typeof File !== 'undefined' && File));
+export const CustomFileReader = (isBrowser || inWebWorker) && ((moduleMapper && moduleMapper.getOriginalSymbol(window, 'FileReader')) || (typeof FileReader !== 'undefined' && FileReader));
 
 /**
  * getFilefromDataUrl