fix: use getAsFileSystemHandle only in secure ctx

Author: rolandjitsu

jest.config.js

@@ -10,6 +10,7 @@ const jestConfig = {
   moduleNameMapper: {
     "^(\\.{1,2}/.*)\\.js$": "$1",
   },
+  setupFilesAfterEnv: ["<rootDir>/test-setup.js"],
 };
 
 export default jestConfig;

src/file-selector.spec.ts

@@ -344,6 +344,41 @@ it("should use getAsFileSystemHandle when available", async () => {
   expect(file.path).toBe(`./${name}`);
 });
 
+it("should not use getAsFileSystemHandle when not in a secure context", async () => {
+  const f1Name = "test.nosec.json";
+  const f1 = createFile(
+    f1Name,
+    { ping: false },
+    {
+      type: "application/json",
+    },
+  );
+  const [, h] = createFileSystemFileHandle(
+    "test.sec.json",
+    { ping: true },
+    {
+      type: "application/json",
+    },
+  );
+  const evt = dragEvtFromItems([dataTransferItemWithFsHandle(f1, h)]);
+
+  globalThis.isSecureContext = false;
+
+  const files = await fromEvent(evt);
+  expect(files).toHaveLength(1);
+  expect(files.every((file) => file instanceof File)).toBe(true);
+
+  const [file] = files as FileWithPath[];
+
+  expect(file.name).toBe(f1.name);
+  expect(file.type).toBe(f1.type);
+  expect(file.size).toBe(f1.size);
+  expect(file.lastModified).toBe(f1.lastModified);
+  expect(file.path).toBe(`./${f1Name}`);
+
+  globalThis.isSecureContext = true;
+});
+
 function dragEvtFromItems(
   items: DataTransferItem | DataTransferItem[],
   type: string = "drop",
@@ -519,8 +554,7 @@ function createFileSystemFileHandle<T>(
   data: T,
   options?: FilePropertyBag,
 ): [File, FileSystemFileHandle] {
-  const json = JSON.stringify(data);
-  const file = new File([json], name, options);
+  const file = createFile(name, data, options);
   return [
     file,
     {

src/file-selector.ts

@@ -109,7 +109,15 @@ function fromDataTransferItem(
   item: DataTransferItem,
   entry?: FileSystemEntry | null,
 ) {
-  if (typeof (item as any).getAsFileSystemHandle === "function") {
+  // Check if we're in a secure context; due to a bug in Chrome (as far as we know) the browser crashes when calling this API (yet to be confirmed as a consistent behavior).
+  //
+  // See:
+  // - https://issues.chromium.org/issues/40186242
+  // - https://github.com/react-dropzone/react-dropzone/issues/1397
+  if (
+    globalThis.isSecureContext &&
+    typeof (item as any).getAsFileSystemHandle === "function"
+  ) {
     return (item as any).getAsFileSystemHandle().then(async (h: any) => {
       const file = await h.getFile();
       file.handle = h;

test-setup.js

@@ -0,0 +1,6 @@
+// NOTE: Let us test {isSecureContext}!
+Object.defineProperty(globalThis, "isSecureContext", {
+  value: true,
+  writable: true,
+  enumerable: true,
+});