Testing Notes

Hello everyone this is the code
{"componentChunkName":"component---src-templates-content-template-
js","path":"/en/part5/login_in_frontend","result":{"data":{"markdownRemark":
{"html":"<div class=\"content\">\nIn the last two parts, we have mainly
concentrated on the backend, and the frontend does not yet support the user
management we implemented to the backend in part 4.\nAt the moment the
frontend shows existing notes, and lets users change the state of a note from
important to not important and vice versa. New notes cannot be added anymore
because of the changes made to the backend in part 4: the backend now expects that
a token verifying a user's identity is sent with the new note. \nWe'll now
implement a part of the required user management functionality in the frontend.
Let's begin with user login. Throughout this part we will assume that new users
will not be added from the frontend. \n<h3>Handling login</h3>\nA login form
has now been added to the top of the page. The form for adding new notes has also
been moved to the bottom of the list of notes. \n<picture><img
src=\"/static/f735fe7db5ad5bbc1413d3ff617c6daa/5a190/1e.png\"
srcset=\"/static/f735fe7db5ad5bbc1413d3ff617c6daa/772e8/1e.png
200w,\n/static/f735fe7db5ad5bbc1413d3ff617c6daa/e17e5/1e.png
400w,\n/static/f735fe7db5ad5bbc1413d3ff617c6daa/5a190/1e.png
800w,\n/static/f735fe7db5ad5bbc1413d3ff617c6daa/c1b63/1e.png
1200w,\n/static/f735fe7db5ad5bbc1413d3ff617c6daa/c4451/1e.png 1450w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nThe code of the App component
now looks as follows: \n<div class=\"gatsby-highlight\" data-
language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">const App = () => {\n
const [notes, setNotes] = useState([]) \n const [newNote,
setNewNote] = useState('')\n const
[showAll, setShowAll] = useState(true)\n
punctuation\">[errorMessage,
setErrorMessage] (null)\n
punctuation\">[username,
setUsername] ) const [password,
setPassword] ) \n useEffect(()
=> {\n noteService\n .getAll().then(initialNotes => {\n setNotes(initialNotes)\n
})\n }, [])\n\n // ...\n\n const
handleLogin = (event)
punctuation\">{
event.preventDefault() console.log('logging in with',
username, password) }\n return (\n <div>\n
<h1>Notes</h1>\n\n
<Notification message={errorMessage} />\n\n
<form onSubmit={handleLogin}> <div>
username <input type=\"text\" value={username}
name=\"Username\"
onChange={({ target }) => setUsername(target.value)} /></div<div>
password
<input type=\"password\" value={password} name=\"Password\"
function\">setPassword(target)}/><button type=\"submit\">login</button>
</form>\n // ...\n >\n )\n}\n\nexport
default App</code></pre></div>\nCurrent
application code can be found on <a href=\"https://github.com/fullstack-hy/part2-
notes/tree/part5-1\">Github</a>, branch part5-1. If you clone the repo,
don't forget to run <code class=\"language-text\">npm install</code> before
attempting to run the frontend.\nThe frontend will not display any notes if
it's not connected to the backend. You can start the backend with <code
class=\"language-text\">npm run dev</code> in its folder from Part 4. This will run
the backend on port 3001. While that is active, in a separate terminal window you
can start the frontend with <code class=\"language-text\">npm start</code>, and now
you can see the notes that are saved in your MongoDB database from Part
4.\nKeep this in mind from now on.\nThe login form is handled the
same way we handled forms in\n<a href=\"/en/part2/forms\">part 2</a>. The app state
has fields for username and password to store the data from the
form. The form fields have event handlers, which synchronize changes in the field
to the state of the App component. The event handlers are simple: An object
is given to them as a parameter, and they destructure the field target from
the object and save its value to the state.\n<div class=\"gatsby-highlight\"
data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">({ target )</code></pre></div>\nThe method handleLogin,
which is responsible for handling the data in the form, is yet to be implemented.
\nLogging in is done by sending an HTTP POST request to server address
api/login. Let's separate the code responsible for this request to its own
module, to file services/login.js.\nWe'll use async/await
syntax instead of promises for the HTTP request: \n<div class=\"gatsby-
highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-
js\">import axios from 'axios'\nconst baseUrl = '/api/login'\n\nlogin = async credentials const response = await axios.post(baseUrl, credentials)\n
return response.data\n}\n\nexport default
{ login }</code></pre></div>\nThe method for handling the login can
be implemented as follows: \n<div class=\"gatsby-highlight\" data-
class=\"token keyword\">import loginService from './services/login'
\n\nconst App = {\n // ...\n [username,
setUsername] ) \n const
[password, setPassword] '') \n const
[user, setUser] null)\n const handleLogin = async (event) => {\n event.preventDefault()\n
\n try {const user = await loginService.login, password, }) setUser(user setUsername('')setPassword(''} catch
(exception) {setErrorMessage('Wrong credentials'setTimeout(() => setErrorMessage(null},
5000} }\n\n // ...\n}</code></pre></div>\nIf the login is
successful, the form fields are emptied and the server response (including a
token and the user details) is saved to the user field of the
application's state.\nIf the login fails, or running the function
loginService.login results in an error, the user is notified. \nThe
user is not notified about a successful login in any way. Let's modify the
application to show the login form only if the user is not logged-in so when
user === null. The form for adding new notes is shown only if the user
is logged-in, so user contains the user details. \nLet's add two
helper functions to the App component for generating the forms: \n<div
class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code
class=\"language-js\">const App = ({\n // ...\n\n loginForm = (\n <form
onSubmit={handleLogin}>\n <div>\n
username\n <input\n
type=\"text\"\n value={username}\n name=\"Username\"\n
punctuation\">)}\n />\n
operator\">/div>\n <input\n
type=\"password\"\n value={password}\n name=\"Password\"\n
function\">setPassword(target)}\n >login</form> \n )\n\n const noteForm = ((\n <form
onSubmit={addNote}<input\n value={newNote}\n onChange={handleNoteChange}\n />\n >save> \n )\n\n return (\n //
...\n )\n}</code></pre></div>\nand conditionally render
them:\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre
class=\"language-js\"><code class=\"language-js\">const App
= // ...\n\n const loginForm = (\n // ...\n )\n\n noteForm = (\n // ...\n )\n\n return (\n <div<h1>Notes</h1>\n\n <Notification message>\n\n
{user === null && loginForm} {user !== null && noteForm}\n <div>\n <button onClick={setShowAll(!showAll)}>\n show {showAll ? 'important' :
'all'}\n </button>\n
class=\"token operator\"><ul>\n
{notesToShow.mapnote, i) => \n
<Note\n key={i}\n note={note} \n toggleImportance={toggleImportanceOf(note.id)}\n
/>\n
)/ul>\n\n
<Footer />\n >\n )\n}</code></pre></div>\nA slightly odd looking,
but commonly used <a href=\"https://reactjs.org/docs/conditional-
rendering.html#inline-if-with-logical--operator\">React trick</a> is used to render
the forms conditionally: \n<div class=\"gatsby-highlight\" data-
class=\"token punctuation\">{\n user === null && loginForm)\n}</code></pre></div>\nIf the first statement evaluates to
false, or is <a href=\"https://developer.mozilla.org/en-
US/docs/Glossary/Falsy\">falsy</a>, the second statement (generating the form) is
not executed at all. \nWe can make this even more straightforward by using
the <a href=\"https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator\">conditional
operator</a>:\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre
class=\"token punctuation\">}/{user === null ?\n
loginForm:\n noteForm()\n }\n\n <h2>Notes</h2>\n\n // ...\n\n </div>\n)</code></pre></div>\nIf user === null is <a
href=\"https://developer.mozilla.org/en-US/docs/Glossary/Truthy\">truthy</a>,
loginForm() is executed. If not, noteForm() is.\nLet's do
one more modification. If the user is logged-in, their name is shown on the screen:
\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-
js\"><code class=\"language-js\">return (\n <h1{user === null ?\n
loginForm:\n <p>{user.name} logged-in</p{noteForm}\n >\n }\n\n <h2// ...\n\n >\n)</code></pre></div>\nThe solution isn't perfect, but we'll
leave it for now. \nOur main component App is at the moment way too
large. The changes we did now are a clear sign that the forms should be refactored
into their own components. However, we will leave that for an optional exercise.
\nCurrent application code can be found on <a
href=\"https://github.com/fullstack-hy/part2-notes/tree/part5-2\">Github</a>,
branch part5-2.\n<h3>Creating new notes</h3>\nThe token returned with
a successful login is saved to the application's state - the user's field
token:\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre
function\">handleLogin = async try {\n const user = await
loginService.login({\n username, password,\n
punctuation\">)\n\n setUser(user)
setUsername('')\n setPassword)\n }
catch (exception) {\n //
...\n }\n}</code></pre></div>\nLet's fix creating new notes so it
works with the backend. This means adding the token of the logged-in user to the
Authorization header of the HTTP request. \nThe noteService module
changes like so: \n<div class=\"gatsby-highlight\" data-language=\"js\"><pre
keyword\">import axios from 'axios'\nconst
baseUrl = '/api/notes'\n\nlet token =
null\nconst setToken = newToken { token
= `bearer ${newToken}`}\ngetAll = {\n const request = axios.get(baseUrl)\n return request.then(response => response.data)\n}\n\nconst
create newObject => {\n
const config = { headers: { Authorization: token },}\n const response = await axios.post(baseUrl, newObject,
config) return response.data\n}\n\nupdate = (id, newObject{\n const request = axios.put(`${ baseUrl } /${id}`, newObject)\n return request.then(response => response.data)\n}\n\nexport default { getAll, create, update, setToken
}</code></pre></div>\nThe
noteService module contains a private variable token. Its value can be
changed with a function setToken, which is exported by the module.
create, now with async/await syntax, sets the token to the
Authorization header. The header is given to axios as the third parameter of
the post method. \nThe
event handler responsible for login must be changed to call the method
<code>noteService.setToken(user.token)</code> with a successful login: \n<div
class=\"language-js\">const )\n\n
noteService.setToken(user.token) setUser(user)\n setUsername)\n setPassword('')\n } catch
(exception) {\n // ...\n }\n}</code></pre></div>\nAnd now adding new notes works again!
\n<h3>Saving the token to the browser's local storage</h3>\nOur application
has a flaw: when the page is rerendered, information of the user's login
disappears. This also slows down development. For example when we test creating new
notes, we have to login again every single time. \nThis problem is easily
solved by saving the login details to <a href=\"https://developer.mozilla.org/en-
US/docs/Web/API/Storage\">local storage</a>. Local Storage is a <a
href=\"https://en.wikipedia.org/wiki/Key-value_database\">key-value</a> database in
the browser. \nIt is very easy to use. A value corresponding to a
certain key is saved to the database with method <a
href=\"https://developer.mozilla.org/en-
US/docs/Web/API/Storage/setItem\">setItem</a>. For example: \n<div
class=\"language-js\">window.localStorage.setItem('name', 'juha tauriainen')</code></pre></div>\nsaves the string given
as the second parameter as the value of key name. \nThe value of a
key can be found with method <a href=\"https://developer.mozilla.org/en-
US/docs/Web/API/Storage/getItem\">getItem</a>:\n<div class=\"gatsby-highlight\"
data-language=\"js\"><pre class=\"language-js\"><code class=\"language-
js\">window.localStorage.getItem('name')</code></pre></div>\nand <a
US/docs/Web/API/Storage/removeItem\">removeItem</a> removes a key. \nValues
in the local storage are persisted even when the page is rerendered. The storage is
<a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Origin\">origin</a>-
specific so each web application has its own storage. \nLet's extend our
application so that it saves the details of a logged-in user to the local storage.
\nValues saved to the storage are <a
href=\"https://developer.mozilla.org/en-US/docs/Web/API/DOMString\">DOMstrings</a>,
so we cannot save a JavaScript object as is. The object has to be parsed to JSON
first, with the method JSON.stringify. Correspondingly, when a JSON object
is read from the local storage, it has to be parsed back to JavaScript with
JSON.parse.\nChanges to the login method are as follows: \n<div
class=\"language-js\"> const )\n\n
window.localStorage.setItem( 'loggedNoteappUser'JSON.stringify(user ) 
noteService.setToken(user.token)\n setUser)\n setUsername('')\n
setPassword('')\n } catch (exception) {\n //
...\n }\n }</code></pre></div>\nThe details of a logged-in user are
now saved to the local storage, and they can be viewed on the console (by typing
<code class=\"language-text\">window.localStorage</code> to the console):
\n<picture><img src=\"/static/a69b93f2f1d403c968a3118a612a559a/5a190/3e.png\"
srcset=\"/static/a69b93f2f1d403c968a3118a612a559a/772e8/3e.png
200w,\n/static/a69b93f2f1d403c968a3118a612a559a/e17e5/3e.png
400w,\n/static/a69b93f2f1d403c968a3118a612a559a/5a190/3e.png
800w,\n/static/a69b93f2f1d403c968a3118a612a559a/c1b63/3e.png
1200w,\n/static/a69b93f2f1d403c968a3118a612a559a/29007/3e.png
1600w,\n/static/a69b93f2f1d403c968a3118a612a559a/e67a8/3e.png 1740w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nYou can also inspect the local storage
using the developer tools. On Chrome, go to the Application tab and select
Local Storage (more details <a
href=\"https://developers.google.com/web/tools/chrome-
devtools/storage/localstorage\">here</a>). On Firefox go to the Storage tab
and select Local Storage (details <a
US/docs/Tools/Storage_Inspector\">here</a>).\nWe still have to modify our
application so that when we enter the page, the application
checks if user details of a logged-in user can already be found on the local
storage. If they can, the details are saved to the state of the application and to
noteService.\nThe right way to do this is with an <a
href=\"https://reactjs.org/docs/hooks-effect.html\">effect hook</a>: a mechanism we
first encountered in <a href=\"/en/part2/getting_data_from_server#effect-
hooks\">part 2</a>, and used to fetch notes from the server. \nWe can have
multiple effect hooks, so let's create a second one to handle the first loading of
the page:\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre
keyword\">const App
= [notes, setNotes] = useState([]) \n [newNote,
setNewNote] [showAll, setShowAll] true)\n
punctuation\">[errorMessage,
setErrorMessage] (null[username, setUsername] '') \n
punctuation\">[password,
setPassword] ) \n const
[user, setUser] null) \n\n
useEffect{\n noteService\n .getAll.theninitialNotes => {\n setNotes(initialNotes)\n
punctuation\">)\n }[])\n\n useEffect{ const loggedUserJSON = window.localStorage.getItem('loggedNoteappUser' if (loggedUserJSON)
{ const user = JSONparse(loggedUserJSONsetUser(user) noteService.setToken.token)} },
[])\n // ...\n}</code></pre></div>\nThe empty array as the parameter of
the effect ensures that the effect is executed only when the component is rendered
<a href=\"https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-
effect\">for the first time</a>.\nNow a user stays logged-in in the
application forever. We should probably add a logout functionality which
removes the login details from the local storage. We will however leave it for an
exercise. \nIt's possible to log out a user using the console, and that is
enough for now.\nYou can log out with the command:\n<div class=\"gatsby-
highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-
js\">window.localStorageremoveItem('loggedNoteappUser')</code></pre></div>\nor with the command which empties
localstorage completely: \n<div class=\"gatsby-highlight\" data-
language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">window.localStorage.clear)</code></pre></div>\nCurrent application code can be found
on <a href=\"https://github.com/fullstack-hy/part2-notes/tree/part5-3\">Github</a>,
branch part5-3.\n</div>\n<div class=\"tasks\">\n<h3>Exercises 5.1.-
5.4.</h3>\nWe will now create a frontend for the bloglist backend we created in
the last part. You can use <a href=\"https://github.com/fullstack-hy/bloglist-
frontend/\">this application</a> from GitHub as the base of your solution. The
application expects your backend to be running on port 3003. \nIt is enough
to submit your finished solution. You can do a commit after each exercise, but that
is not necessary. \nThe first few exercises revise everything we have
learned about React so far. They can be challenging, especially if your backend is
incomplete.\nIt might be best to use the backend from model answers of part 4.
\nWhile doing the exercises, remember all of the debugging methods we have
talked about, especially keeping an eye on the console.
\nWarning: If you notice you are mixing in same function
async/await and then commands, it's 99.9% certain you are doing something
wrong. Use either or, never both. \n<h4>5.1: bloglist frontend,
step1</h4>\nClone the application from <a href=\"https://github.com/fullstack-
hy/bloglist-frontend\">Github</a> with the command: \n<div class=\"gatsby-
highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code
class=\"language-bash\">git clone
https://github.com/fullstack-hy/bloglist-frontend</code></pre></div>\nremove
the git configuration of the cloned application\n<div class=\"gatsby-
highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code
class=\"language-bash\">cd
bloglist-frontend // go to cloned repository\nrm -rf .git</code></pre></div>\nThe application is started the
usual way, but you have to install its dependencies first: \n<div
class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-
bash\"><code class=\"language-bash\">npm
install\nnpm start</code></pre></div>\nImplement login functionality to
the frontend. The token returned with a successful login is saved to the
application's state user.\nIf a user is not logged-in, only
the login form is visible. \n<picture><img
src=\"/static/7974958a48f7a4e873550b1b85bd8cbd/5a190/4e.png\"
srcset=\"/static/7974958a48f7a4e873550b1b85bd8cbd/772e8/4e.png
200w,\n/static/7974958a48f7a4e873550b1b85bd8cbd/e17e5/4e.png
400w,\n/static/7974958a48f7a4e873550b1b85bd8cbd/5a190/4e.png
800w,\n/static/7974958a48f7a4e873550b1b85bd8cbd/c1b63/4e.png
1200w,\n/static/7974958a48f7a4e873550b1b85bd8cbd/cf8e5/4e.png 1402w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nIf user is logged-in, the name of the
user and a list of blogs is shown. \n<picture><img
src=\"/static/62a606d23ac2c2c96918567b8a8c7b32/5a190/5e.png\"
srcset=\"/static/62a606d23ac2c2c96918567b8a8c7b32/772e8/5e.png
200w,\n/static/62a606d23ac2c2c96918567b8a8c7b32/e17e5/5e.png
400w,\n/static/62a606d23ac2c2c96918567b8a8c7b32/5a190/5e.png
800w,\n/static/62a606d23ac2c2c96918567b8a8c7b32/c1b63/5e.png
1200w,\n/static/62a606d23ac2c2c96918567b8a8c7b32/0e904/5e.png 1384w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nUser details of the logged-in user do
not have to be saved to the local storage yet. \nNB You can
implement the conditional rendering of the login form like this for example:
\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-
js\"><code class=\"language-js\"> if (user ===
null)
{\n >Log in to application</h2<form>\n //...\n >\n )\n }\n\n >blogs</h2>\n
{blogs.map(blog =>\n <Blog key={blog.id} blog={blog} )/div>\n
)\n}</code></pre></div>\n<h4>5.2: bloglist frontend,
step2</h4>\nMake the login 'permanent' by using the local storage. Also
implement a way to log out. \n<picture><img
src=\"/static/fa111e6eccf20340b5258c12553d2ea6/5a190/6e.png\"
srcset=\"/static/fa111e6eccf20340b5258c12553d2ea6/772e8/6e.png
200w,\n/static/fa111e6eccf20340b5258c12553d2ea6/e17e5/6e.png
400w,\n/static/fa111e6eccf20340b5258c12553d2ea6/5a190/6e.png
800w,\n/static/fa111e6eccf20340b5258c12553d2ea6/c1b63/6e.png
1200w,\n/static/fa111e6eccf20340b5258c12553d2ea6/d0c2f/6e.png 1362w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nEnsure the browser does not remember
the details of the user after logging out. \n<h4>5.3: bloglist frontend,
step3</h4>\nExpand your application to allow a logged-in user to add new blogs:
\n<picture><img src=\"/static/b9f4cf7f481e4f1358be610031afe219/5a190/7e.png\"
srcset=\"/static/b9f4cf7f481e4f1358be610031afe219/772e8/7e.png
200w,\n/static/b9f4cf7f481e4f1358be610031afe219/e17e5/7e.png
400w,\n/static/b9f4cf7f481e4f1358be610031afe219/5a190/7e.png
800w,\n/static/b9f4cf7f481e4f1358be610031afe219/c1b63/7e.png
1200w,\n/static/b9f4cf7f481e4f1358be610031afe219/b1584/7e.png 1342w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\n<h4>5.4*: bloglist frontend,
step4</h4>\nImplement notifications which inform the user about successful and
unsuccessful operations at the top of the page. For example, when a new blog is
added, the following notification can be shown: \n<picture><img
src=\"/static/58838a80180d9d94fb4bc3673a8a67c0/5a190/8e.png\"
srcset=\"/static/58838a80180d9d94fb4bc3673a8a67c0/772e8/8e.png
200w,\n/static/58838a80180d9d94fb4bc3673a8a67c0/e17e5/8e.png
400w,\n/static/58838a80180d9d94fb4bc3673a8a67c0/5a190/8e.png
800w,\n/static/58838a80180d9d94fb4bc3673a8a67c0/c1b63/8e.png
1200w,\n/static/58838a80180d9d94fb4bc3673a8a67c0/8b640/8e.png 1454w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nFailed login can show the following
notification: \n<picture><img
src=\"/static/5f30f6f454735133b39d706a3fa7f9c1/5a190/9e.png\"
srcset=\"/static/5f30f6f454735133b39d706a3fa7f9c1/772e8/9e.png
200w,\n/static/5f30f6f454735133b39d706a3fa7f9c1/e17e5/9e.png
400w,\n/static/5f30f6f454735133b39d706a3fa7f9c1/5a190/9e.png
800w,\n/static/5f30f6f454735133b39d706a3fa7f9c1/c1b63/9e.png
1200w,\n/static/5f30f6f454735133b39d706a3fa7f9c1/21b4d/9e.png 1280w\" sizes=\"(max-
width: 800px) 100vw, 800px\"></picture>\nThe notifications must be visible for a
few seconds. It is not compulsory to add colors. \n</div>\n<div
class=\"content\">\n<h3>A note on using local storage</h3>\nAt the <a
href=\"/en/part4/token_authentication#problems-of-token-based-
authentication\">end</a> of the last part we mentioned that the challenge of the
token based authentication is how to cope with the situation when the API access of
the token holder to the API needs to be revoked.\nThere are two solutions to
the problem. The first one is to limit the validity period of a token. This forces
the user to relogin to the app once the token has expired. The other approach is to
save the validity information of each token to the backend database. This solution
is often called a server side session.\nNo matter how the validity of
tokens is checked and ensured, saving a token in the local storage might contain a
security risk if the application has a security vulnerability that allows <a
href=\"https://owasp.org/www-community/attacks/xss/\">Cross Site Scripting
(XSS)</a> attacks. A XSS attack is possible if the application would allow a user
to inject arbitrary JavaScript code (e.g. using a form) that the app would then
execute. When using React in a sensible manner it should not be possible since <a
href=\"https://reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-
attacks\">React sanitizes</a> all text that it renders, meaning that it is not
executing the rendered content as JavaScript.\nIf one wants to play safe,
the best option is to not store a token to the local storage. This might be an
option in situations where leaking a token might have tragic
consequences.\nIt has been suggested that the identity of a signed in user
should be saved as <a href=\"https://developer.mozilla.org/en-
US/docs/Web/HTTP/Cookies#restrict_access_to_cookies\">httpOnly cookies</a>, so that
JavaScript code could not have any access to the token. The drawback of this
solution is that it would make implementing SPA-applications a bit more complex.
One would need at least to implement a separate page for logging
in.\nHowever it is good to notice that even the use of a httpOnly cookies
does not guarantee anything. It has even been suggested that httpOnly cookies are
<a href=\"https://academind.com/tutorials/localstorage-vs-cookies-xss/\">not any
safer than</a> the use of local storage. \nSo no matter the used solution
the most important thing is to <a
href=\"https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Chea
t_Sheet.html\">minimize the risk</a> of XSS attacks
altogether.\n</div>","frontmatter":{"mainImage":
{"publicURL":"/static/b92f84fe9702a35b12f10af4588ba4c2/part-
5.svg"},"part":5,"letter":"a","lang":"en"}}},"pageContext":
{"part":5,"letter":"a","lang":"en"}}}

Testing Notes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Testing Notes

Uploaded by

Copyright:

Available Formats

Hello everyone this is the code

You might also like