diff --git a/web/src/App.js b/web/src/App.js
index c7e7e38b..f25e9334 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -62,7 +62,7 @@ class App extends Component {
     });
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     Setting.setLanguage();
     this.updateMenuKey();
     this.getAccount();
@@ -165,7 +165,7 @@ class App extends Component {
 
     return (
       <Dropdown key="200" overlay={menu} >
-        <a className="ant-dropdown-link" href="#" style={{float: 'right'}}>
+        <div className="ant-dropdown-link" style={{float: 'right', cursor: 'pointer'}}>
           <Avatar style={{ backgroundColor: Setting.getAvatarColor(this.state.account.name), verticalAlign: 'middle' }} size="large">
             {Setting.getShortName(this.state.account.name)}
           </Avatar>
@@ -175,7 +175,7 @@ class App extends Component {
           &nbsp;
           &nbsp;
           &nbsp;
-        </a>
+        </div>
       </Dropdown>
     )
   }
@@ -347,7 +347,7 @@ class App extends Component {
         }
       }>
         <SelectLanguageBox/>
-        Made with <span style={{color: 'rgb(255, 255, 255)'}}>❤️</span> by <a style={{fontWeight: "bold", color: "black"}} target="_blank" href="https://casbin.org">Casbin</a>
+        Made with <span style={{color: 'rgb(255, 255, 255)'}}>❤️</span> by <a style={{fontWeight: "bold", color: "black"}} target="_blank" href="https://casbin.org" rel="noreferrer">Casbin</a>
       </Footer>
     )
   }
diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index 61dc09aa..38faf2a0 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -37,7 +37,7 @@ class ApplicationEditPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getApplication();
     this.getOrganizations();
     this.getProviders();
@@ -135,7 +135,7 @@ class ApplicationEditPage extends React.Component {
                 {i18next.t("general:Preview")}:
               </Col>
               <Col span={23} >
-                <a target="_blank" href={this.state.application.logo}>
+                <a target="_blank" rel="noreferrer" href={this.state.application.logo}>
                   <img src={this.state.application.logo} alt={this.state.application.logo} height={90} style={{marginBottom: '20px'}}/>
                 </a>
               </Col>
@@ -257,7 +257,7 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("application:Login Page Preview")}:
           </Col>
           <Col span={22} >
-            <a style={{marginBottom: '10px'}} target="_blank" href={`/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`}>
+            <a style={{marginBottom: '10px'}} target="_blank" rel="noreferrer" href={`/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`}>
               {
                 `${window.location.host}/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`
               }
diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js
index 32fea528..06fbe725 100644
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -30,7 +30,7 @@ class ApplicationListPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getApplications();
   }
 
@@ -127,7 +127,7 @@ class ApplicationListPage extends React.Component {
         width: '250px',
         render: (text, record, index) => {
           return (
-            <a target="_blank" href={text}>
+            <a target="_blank" rel="noreferrer" href={text}>
               <img src={text} alt={text} width={150} />
             </a>
           )
diff --git a/web/src/OrganizationEditPage.js b/web/src/OrganizationEditPage.js
index 28be09e4..a914185f 100644
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@@ -28,7 +28,7 @@ class OrganizationEditPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getOrganization();
   }
 
@@ -68,7 +68,7 @@ class OrganizationEditPage extends React.Component {
       } style={{marginLeft: '5px'}} type="inner">
         <Row style={{marginTop: '10px'}} >
           <Col style={{marginTop: '5px'}} span={2}>
-            {i18next.t("general:Name")}: 
+            {i18next.t("general:Name")}:
           </Col>
           <Col span={22} >
             <Input value={this.state.organization.name} onChange={e => {
diff --git a/web/src/OrganizationListPage.js b/web/src/OrganizationListPage.js
index 67a7a432..0e832040 100644
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@@ -29,7 +29,7 @@ class OrganizationListPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getOrganizations();
   }
 
@@ -122,7 +122,7 @@ class OrganizationListPage extends React.Component {
         sorter: (a, b) => a.websiteUrl.localeCompare(b.websiteUrl),
         render: (text, record, index) => {
           return (
-            <a target="_blank" href={text}>
+            <a target="_blank" rel="noreferrer" href={text}>
               {text}
             </a>
           )
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 682674c3..851ed71b 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -30,7 +30,7 @@ class ProviderEditPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getProvider();
   }
 
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index f622f219..e32f0fdc 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -30,7 +30,7 @@ class ProviderListPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getProviders();
   }
 
@@ -152,7 +152,7 @@ class ProviderListPage extends React.Component {
         sorter: (a, b) => a.providerUrl.localeCompare(b.providerUrl),
         render: (text, record, index) => {
           return (
-            <a target="_blank" href={text}>
+            <a target="_blank" rel="noreferrer" href={text}>
               {
                 Setting.getShortText(text)
               }
diff --git a/web/src/SelectLanguageBox.js b/web/src/SelectLanguageBox.js
index f5086cc3..dfc36017 100644
--- a/web/src/SelectLanguageBox.js
+++ b/web/src/SelectLanguageBox.js
@@ -27,10 +27,12 @@ class SelectLanguageBox extends React.Component {
     return (
       <div align="center">
         <div className="box" style={{width: "600px"}}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a onClick={() => Setting.changeLanguage("en")} className="lang-selector">
             English
           </a>
           /
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a onClick={() => Setting.changeLanguage("zh")} className="lang-selector">
             简体中文
           </a>
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 4dec3b76..6ae43808 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -162,6 +162,7 @@ export function changeLanguage(language) {
 
 export function getClickable(text) {
   return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
     <a onClick={() => {
       copy(text);
       showMessage("success", `Copied to clipboard`);
diff --git a/web/src/TokenEditPage.js b/web/src/TokenEditPage.js
index aa3525de..3d2c7956 100644
--- a/web/src/TokenEditPage.js
+++ b/web/src/TokenEditPage.js
@@ -13,13 +13,11 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Row, Select} from 'antd';
+import {Button, Card, Col, Input, Row} from 'antd';
 import * as TokenBackend from "./backend/TokenBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 
-const { Option } = Select;
-
 class TokenEditPage extends React.Component {
   constructor(props) {
     super(props);
@@ -30,7 +28,7 @@ class TokenEditPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getToken();
   }
 
diff --git a/web/src/TokenListPage.js b/web/src/TokenListPage.js
index 71a50273..a0b7f1e1 100644
--- a/web/src/TokenListPage.js
+++ b/web/src/TokenListPage.js
@@ -29,7 +29,7 @@ class TokenListPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getTokens();
   }
 
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 8f160fbe..6b7ad37c 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -35,7 +35,7 @@ class UserEditPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getUser();
     this.getOrganizations();
   }
@@ -143,7 +143,7 @@ class UserEditPage extends React.Component {
                 {i18next.t("general:Preview")}:
               </Col>
               <Col span={23} >
-                <a target="_blank" href={this.state.user.avatar}>
+                <a target="_blank" rel="noreferrer" href={this.state.user.avatar}>
                   <img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: '20px'}}/>
                 </a>
               </Col>
diff --git a/web/src/UserListPage.js b/web/src/UserListPage.js
index 51b864bf..4b0319f2 100644
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@@ -29,7 +29,7 @@ class UserListPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getUsers();
   }
 
@@ -156,7 +156,7 @@ class UserListPage extends React.Component {
         width: '100px',
         render: (text, record, index) => {
           return (
-            <a target="_blank" href={text}>
+            <a target="_blank" rel="noreferrer" href={text}>
               <img src={text} alt={text} width={50} />
             </a>
           )
@@ -225,7 +225,7 @@ class UserListPage extends React.Component {
         title: i18next.t("general:Action"),
         dataIndex: '',
         key: 'op',
-        width: '170px',
+        width: '190px',
         render: (text, record, index) => {
           return (
             <div>
diff --git a/web/src/auth/AuthCallback.js b/web/src/auth/AuthCallback.js
index c67d2d6e..f5f318f3 100644
--- a/web/src/auth/AuthCallback.js
+++ b/web/src/auth/AuthCallback.js
@@ -53,7 +53,7 @@ class AuthCallback extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const params = new URLSearchParams(this.props.location.search);
     const innerParams = this.getInnerParams();
     const applicationName = innerParams.get("application");
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 0765c596..46ed252d 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -33,7 +33,7 @@ class LoginPage extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.state.type === "login") {
       this.getApplication();
     } else if (this.state.type === "code") {
@@ -199,7 +199,7 @@ class LoginPage extends React.Component {
         <div style={{marginTop: "20px"}}>
           <div style={{fontSize: 20, textAlign: "left"}}>
             Please click to login&nbsp;
-            <a target="_blank" href={application.homepageUrl}>
+            <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
               {application.displayName}
             </a>
             :
@@ -222,7 +222,7 @@ class LoginPage extends React.Component {
   renderLogo(application) {
     if (application.homepageUrl !== "") {
       return (
-        <a target="_blank" href={application.homepageUrl}>
+        <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
           <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: '30px'}}/>
         </a>
       )
diff --git a/web/src/basic/SingleCard.js b/web/src/basic/SingleCard.js
index 1f373fcb..d318b97f 100644
--- a/web/src/basic/SingleCard.js
+++ b/web/src/basic/SingleCard.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Card, Col, Row} from "antd";
+import {Card, Col} from "antd";
 import * as Setting from "../Setting";
 import {withRouter} from "react-router-dom";