fix Navigator clipboard api needs a secure context (https) (#11942)

alibaba · Apr 11, 2024 · fb59708 · fb59708
1 parent 5c14159
commit fb59708
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/console-ui/src/components/Copy/index.jsx b/console-ui/src/components/Copy/index.jsx
@@ -37,7 +37,29 @@ class Copy extends React.Component {
   };
 
 copyText(locale, value) {
-  navigator.clipboard.writeText(value);
+  // fix Navigator clipboard api needs a secure context (https)
+  // refer to https://stackoverflow.com/questions/51805395/navigator-clipboard-is-undefined
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(value);
+  } else {
+    // Use the 'out of viewport hidden text area' trick
+    const textArea = document.createElement('textarea');
+    textArea.value = value;
+
+    // Move textarea out of the viewport so it's not visible
+    textArea.style.position = 'absolute';
+    textArea.style.left = '-999999px';
+
+    document.body.prepend(textArea);
+    textArea.select();
+
+    try {
+      document.execCommand('copy');
+    } catch (error) {
+    } finally {
+      textArea.remove();
+    }
+  }
   Message.success(locale.Components.copySuccessfully);
 }
 

diff --git a/console/src/main/resources/static/index.html b/console/src/main/resources/static/index.html
@@ -35,7 +35,7 @@
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/icon.css">
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/font-awesome.css">
 	<!-- 第三方css结束 -->
-<link href="./css/main.css?3136b296dca60e1980ec" rel="stylesheet"></head>
+<link href="./css/main.css?48bc3a2e5faa78253d8a" rel="stylesheet"></head>
 
 <body>
 	<div id="root" style="overflow:hidden"></div>
@@ -56,6 +56,6 @@
 	<script src="console-ui/public/js/merge.js"></script>
 	<script src="console-ui/public/js/loader.js"></script>
 	<!-- 第三方js结束 -->
-<script type="text/javascript" src="./js/main.js?3136b296dca60e1980ec"></script></body>
+<script type="text/javascript" src="./js/main.js?48bc3a2e5faa78253d8a"></script></body>
 
 </html>
diff --git a/console/src/main/resources/static/js/main.js b/console/src/main/resources/static/js/main.js