re-introduce absinthe package in frontend (upload problem) / need to study vulnerability - #1814

src/apollo/absinthe-socket-link.ts

@@ -0,0 +1,25 @@
+import { Socket as PhoenixSocket } from "phoenix";
+import { create } from "@framasoft/socket";
+import { createAbsintheSocketLink } from "@framasoft/socket-apollo-link";
+import { AUTH_ACCESS_TOKEN } from "@/constants";
+import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
+
+const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
+
+const webSocketPrefix = import.meta.env.PROD ? "wss" : "ws";
+const wsEndpoint = `${webSocketPrefix}${httpServer.substring(
+  httpServer.indexOf(":")
+)}/graphql_socket`;
+
+const phoenixSocket = new PhoenixSocket(wsEndpoint, {
+  params: () => {
+    const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
+    if (token) {
+      return { token };
+    }
+    return {};
+  },
+});
+
+const absintheSocket = create(phoenixSocket);
+export default createAbsintheSocketLink(absintheSocket);

src/apollo/absinthe-upload-socket-link.ts

@@ -0,0 +1,20 @@
+import fetch from "unfetch";
+import { createLink } from "apollo-absinthe-upload-link";
+import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "@/api/_entrypoint";
+
+// Endpoints
+const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
+const httpEndpoint = GRAPHQL_API_FULL_PATH || `${httpServer}/api`;
+
+const customFetch = async (uri: string, options: any) => {
+  const response = await fetch(uri, options);
+  if (response.status >= 400) {
+    return Promise.reject(response.status);
+  }
+  return response;
+};
+
+export const uploadLink = createLink({
+  uri: httpEndpoint,
+  fetch: customFetch,
+});

src/apollo/link.ts

@@ -1,25 +1,31 @@
-import { from } from "@apollo/client/core";
-import { createHttpLink } from "@apollo/client";
+import { from, split } from "@apollo/client/core";
 import { RetryLink } from "@apollo/client/link/retry";
+import { getMainDefinition } from "@apollo/client/utilities";
+import absintheSocketLink from "./absinthe-socket-link";
+import { authMiddleware } from "./auth";
+import errorLink from "./error-link";
+import { uploadLink } from "./absinthe-upload-socket-link";
 import { removeTypenameFromVariables } from "@apollo/client/link/remove-typename";
-import { authMiddleware } from "@/apollo/auth";
-import errorLink from "@/apollo/error-link";
-import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "@/api/_entrypoint";
-
-// Endpoints
-const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
-const httpEndpoint = GRAPHQL_API_FULL_PATH || `${httpServer}/api`;
-
-const uploadLink = createHttpLink({
-  uri: httpEndpoint,
-});
 
 const retryLink = new RetryLink();
 
+const link = split(
+  // split based on operation type
+  ({ query }) => {
+    const definition = getMainDefinition(query);
+    return (
+      definition.kind === "OperationDefinition" &&
+      definition.operation === "subscription"
+    );
+  },
+  absintheSocketLink,
+  uploadLink
+);
+
 export const fullLink = from([
   removeTypenameFromVariables(),
   retryLink,
   errorLink,
   authMiddleware,
-  uploadLink,
+  link ?? uploadLink,
 ]);

src/components/Event/Integrations/YouTubeIntegration.vue

@@ -7,7 +7,14 @@
         :src="`https://www.youtube.com/embed/${videoID}`"
         title="YouTube video player"
         frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allow="
+          accelerometer;
+          autoplay;
+          clipboard-write;
+          encrypted-media;
+          gyroscope;
+          picture-in-picture;
+        "
         allowfullscreen
       ></iframe>
     </div>

src/typings/absinthe.d.ts

@@ -0,0 +1,5 @@
+declare module "@framasoft/socket";
+
+declare module "@framasoft/socket-apollo-link";
+
+declare module "apollo-absinthe-upload-link";