Logs are very helpful in finding the root cause of the issues you may be experiencing in an app. It is an efficient way to resolve issues by knowing the exact reason after checking Logs.
\nLet's say we have developed an iOS app. As in many situations, we want to test our app on another's phone for many reasons. And probably that phone cannot be connected to the Mac. So, the console logs of the app can be sent directly from the app to the developer(us).
\nThis blog will provide step-by-step instructions for mailing iOS app logs directly from the app.
\nHere we are having a project with a single ViewController. We may ask our users to install the app on their device, use it and at the end click on “Press for Logs” Button. By clicking IBAction pressForLogs function will get called which will open MailComposer and then the user can mail the Log file to us.
\npublic var logFilePath:String!\n \n//======================//\nfunc print(_ items: Any..., separator: String = " ", terminator: String = "\\n") {\n let output = items.map { "*\\($0)"}.joined(separator: " ")\n //Swift.print(output, terminator: terminator)\n NSLog(output)\n}Above function override any log calls in the app.
\nfunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool function.func printTheDataAtLogFile() {\n logFilePath = NSTemporaryDirectory().appending(String.init(format: "%@.log",Bundle.main.object(forInfoDictionaryKey: "CFBundleName") as! String)) as String\n freopen((logFilePath as NSString).cString(using: String.Encoding(rawValue: String.Encoding.ascii.rawValue).rawValue)!, "a+", stderr)\n }Above function will write all logs into a file instead of console.
\nOpen Viewcontroller.swift. Define below 2 functions in it.
\nfunc allOptions() {\nlet alert = UIAlertController(title: "Please Select an Option", message: nil, preferredStyle: .actionSheet)\n\nalert.addAction(UIAlertAction(title: "Log Mail", style: .default , handler:{ (UIAlertAction)in\n self.shareDocument(documentPath: logFilePath)\n}))\n\nalert.addAction(UIAlertAction(title: "dismis", style: .cancel, handler:{ (UIAlertAction)in\n print("User click Dismiss button")\n}))\n\nself.present(alert, animated: true, completion: {\n print("completion block")\n})\n}\n\n// ============================= //\n\n// this is to share file //\nfunc shareDocument(documentPath: String) {\nif FileManager.default.fileExists(atPath: documentPath){\n let fileURL = URL(fileURLWithPath: documentPath)\n let activityViewController: UIActivityViewController = UIActivityViewController(activityItems: [fileURL], applicationActivities: nil)\n activityViewController.popoverPresentationController?.sourceView=self.view\n present(activityViewController, animated: true, completion: nil)\n}\nelse {\n print("Document was not found")\n}\n}Call allOptions() from IBAction pressForLogs. Above functions will open ActivityViewContrrolle to let the user mail log file to you.
Thanks for visiting us! We hope you find this knowledge base useful! Our mission is to make mobile app development happy. We hope we’re living up to the mission with your project.
\nPlease write to us for suggestions and for the contents we should come up with!
\nThanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:
\n\n","frontmatter":{"date":"July 22, 2020","updated_date":null,"description":null,"title":"How to obtain iOS application logs without Mac","tags":["Logs","ios","xcode","iPhone","troubleshoot","Mac"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d20c2fa69dbca2ed569074ba6253a8e3/ee604/Log.png","srcSet":"/static/d20c2fa69dbca2ed569074ba6253a8e3/69585/Log.png 200w,\n/static/d20c2fa69dbca2ed569074ba6253a8e3/497c6/Log.png 400w,\n/static/d20c2fa69dbca2ed569074ba6253a8e3/ee604/Log.png 800w,\n/static/d20c2fa69dbca2ed569074ba6253a8e3/f3583/Log.png 1200w,\n/static/d20c2fa69dbca2ed569074ba6253a8e3/0dadc/Log.png 1500w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Tanvi Jain","github":"tanvijn","avatar":null}}}},{"node":{"excerpt":"What is the “hosts” file A hosts file which is used by operating systems to map a connection between an IP address and domain names before…","fields":{"slug":"/engineering/hosts-file/"},"html":"A hosts file which is used by operating systems to map a connection between an IP address and domain names before going to domain name servers. This file is a simple text file with the mapping of IPs and domain names.
\nYou can use this to block advertisers, trackers, block marketing, or third party websites, block ads, banners, 3rd party page counters, or sites to protect your privacy.
\nIf you don’t want your children to open some websites you can block them by the hosts file. You can decide entirely what you wish to block and even most hijackers and possibly unwanted programs.
\nWe can utilize it as a firewall in our local system. The hosts file is to block Spyware and/or ad Networks you can add all the Spyware sites & ad Networks domain names in your hosts file also you can block dangerous sites, ransomware sites, blockchain sites.
\nYou know during the development, you need to run your web application on the localhost for verification. Websites can run on the localhost, 127.0.0.1, or localhost IP address. There are some limitations in the localhost, you want to review your website on the custom domain before launching on the public domain suppose you have developed the e-commerce. You want to debug some payment gateway issue but your payment gateway is not supporting localhost URL or IP in the case of successful payment. You can add custom domain in the hosts file and validate the payment process on localhost
\nWindows operating system we need to open the host file
\n
Open the hosts file. Click on File > Open and Copy and Paste the following path`
\nc:\\Windows\\System32\\Drivers\\etc\\hosts
You can edit the hosts file
\nSuppose you want to block facebook.com on your system and want to add a custom domain for your website. Just Copy and Paste following Lines
\n0.0.0.0 www.facebook.com\n127.0.0.1 www.customdomain.com
After finishing the Editing, Save your hosts file
\n
Open your browser and try to access www.facebook.com and see you can’t access this site
\n
Use following instructions for Linux
\nIn the Linux terminal window, open hosts file using a favorite text editor
\n$ sudo vim /etc/hosts
Use following instructions for macOS
\n
sudo vim /etc/hosts in the terminal\n-- It will prompt for the password, enter your administrator password\n-- Enter administrator Password\n
Using the vim text editor you can easily edit you. The macOS hosts file is also similar to the windows and Linux hosts file. I am blocking Facebook and adding custom domain here as well.
\n
The hosts file is found on all operating systems. The hosts file is a powerful tool. It can make your computer more secure and safer by blocking malicious sites
\n","frontmatter":{"date":"July 20, 2020","updated_date":null,"description":"Hosts file maps hostnames to IP addresses, sometimes required to be edited either to block some sites or to test some custom domain.This blog explains how can we edit the hosts in different operating systems.","title":"Benefits and usages of Hosts File","tags":["Computer tricks","Networking","Hosts File"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4184397163120568,"src":"/static/2b2c60ac5ca62d5201374a722f6a3f2f/f422e/index.jpg","srcSet":"/static/2b2c60ac5ca62d5201374a722f6a3f2f/f836f/index.jpg 200w,\n/static/2b2c60ac5ca62d5201374a722f6a3f2f/2244e/index.jpg 400w,\n/static/2b2c60ac5ca62d5201374a722f6a3f2f/f422e/index.jpg 640w","sizes":"(max-width: 640px) 100vw, 640px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not…","fields":{"slug":"/engineering/react-state-management/"},"html":"Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux.
\nIn this post, We are going to take a closer look at both React hooks and Redux to manage the state.
\nReact components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.
\nThe state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterwards, because it's represented by this new state rather than the old state.
\n\n\nMake a state variable responsible for one concern to use efficiently.
\n
React applications are built using components and they manage their state internally and it works well for applications with few components, but when the application grows bigger, the complexity of managing states shared across components becomes difficult.
\nHere is a simple example of an e-commerce application, in which the status of multiple components will change when purchasing a product.
\nIf developers do not have scalability in mind then it is really hard to find out what is happening when something goes wrong. This is why you need state management in your application.
\nLet’s discuss how to use react state management using react hooks and redux
\nRedux was created to resolve this particular issue. it provides a central store that holds all states of your application. Each component can access the stored state without sending it from one component to another. Here is a simple view of how Redux works.
\nThere are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does.
\nActions are payloads of information that send data from your application to your store. Actions are sent using store.dispatch(). Actions are created via an action creator.\nHere is an example action that represents adding a new todo item:
{ \ntype: "ADD_TODO", \npayload: {text:"Hello Foo"}\n }Here is an example of its action creator:
\nocnst addTodo = (text) => {\n return {\n type: "ADD_TODO",\n text\n };\n}Reducers specify how the application's state changes in response to actions sent to the store.\nAn example of how Reducer works in Redux is as follows:
\n const TODOReducer= (state = {}, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n};The store holds the application state. You can access stored state, update the state, and register or unregister listeners via helper methods.
\nLet’s create a store for our TODO app:
\nconst store = createStore(TODOReducer);In other words, Redux gives you code organization and debugging superpowers. This makes it easier to build more maintainable code, and much easier to track down the root cause when something goes wrong.
\nThese are functions that hook you into React state and features from function components. Hooks don't work inside classes and it allows you to use React features without writing a class.
\nHooks are backwards-compatible, which means it doesn't keep any breaking changes. React provides some built-in Hooks like useState, UseEffect and useReducer etc. You can also make custom hooks.
Please see the following examples of some react hooks as follows:
\nuseState is a Hook that Lets you add React state to function components.\nExample:\nDeclaring a State Variable in class and initialize count state with 0 by setting this.state to {count:0}.
class Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component:
function Example() {\n const [count, setCount] = useState(0);\n}We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.
\nuseReducer is a hook I use sometimes to manage the state of the application. It is very similar to the useState hook, just more complex. useReducer hook uses the same concept as the reducers in Redux. It is basically a pure function, with no side-effects.
Example of useReducer:
\nuseReducer creates an independent component co-located state container within your component. Whereas Redux creates a global state container that hangs somewhere above your entire application.
\n +----------------+ +----------------+\n | Component A | | |\n | | | |\n | | | Redux |\n +----------------+ | |\n | connect Redux |<-------------| |\n +--------+-------+ +--------+-------+\n | |\n +---------+-----------+ |\n | | |\n | | |\n+--------+-------+ +--------+-------+ |\n| Component B | | Component C | |\n| | | | |\n| | | | |\n+----------------+ +----------------+ |\n| useReducer | | connect Redux |<----------+\n+----------------+ +--------+-------+\n |\n +--------+-------+\n | Component D |\n | |\n | |\n +----------------+Below an example of todo items is completed or not using the useReducer react hook.
\nSee the following function which is a reducer function for managing state transitions for a list of items:
\n const todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n };There are two types of actions which are equivalent to two states. they used to toggle the complete boolean field and additional payload to identify incoming action.
\nThe state which is managed in this reducer is an array of items:
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n ];In code, The useReducer hook is used for complex state and state transitions. It takes a reducer function and an initial state as input and returns the current state and a dispatch function as output
\n const [todos, dispatch] = React.useReducer(\n todoReducer,\n initialTodos\n );Complete file:
\nimport React from "react";\n\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todoReducer = (state, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\nconst App = () => {\n const [todos, dispatch] = React.useReducer(todoReducer, initialTodos);\n\n const handleChange = todo => {\n dispatch({\n type: todo.complete ? "REMOVE_TODO" : "ADD_TODO",\n id: todo.id\n });\n };\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default App;Let’s do a similar example with Redux.
\nStore in App.js.
\nimport React from "react";\nimport { Provider } from "react-redux";\nimport { createStore } from "redux";\nimport rootReducer from "./reducers";\nimport Todo from "./Components/TODO";\nconst store = createStore(rootReducer);\n\nfunction App() {\n return (\n <div className="App">\n <Provider store={store}>\n <Todo />\n </Provider>\n </div>\n );\n}\n\nexport default App;Actions in actions/index.js.
\nexport const addTodo = id => ({\n type: "ADD_TODO",\n id\n});\n\nexport const removeTodo = id => ({\n type: "REMOVE_TODO",\n id\n});Reducers in reducers/index.js.
\nconst initialTodos = [\n {\n id: "t1",\n task: "Add Task 1",\n complete: false\n },\n {\n id: "t2",\n task: "Add Task 2",\n complete: false\n }\n];\nconst todos = (state = initialTodos, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: true };\n } else {\n return todo;\n }\n });\n case "REMOVE_TODO":\n return state.map(todo => {\n if (todo.id === action.id) {\n return { ...todo, complete: false };\n } else {\n return todo;\n }\n });\n default:\n return state;\n }\n};\n\nexport default todos;FIle components/Todo.js
\nimport React from "react";\nimport { connect } from "react-redux";\nimport { addTodo, removeTodo } from "../../redux/actions/authActions";\n\nconst Todo = ({ todos, addTodo, removeTodo }) => {\n const handleChange = todo => {\n if (todo.complete) {\n removeTodo(todo.id);\n } else {\n addTodo(todo.id);\n }\n };\n\n return (\n <ul>\n {todos.map(todo => (\n <li key={todo.id}>\n <label>\n <input\n type="checkbox"\n checked={todo.complete}\n onChange={() => handleChange(todo)}\n />\n {todo.task}\n </label>\n </li>\n ))}\n </ul>\n );\n};\n\nconst mapStateToProps = state => ({ todos: state.auth.todos });\nconst mapDispatchToProps = dispatch => {\n return {\n addTodo: id => dispatch(addTodo(id)),\n removeTodo: id => dispatch(removeTodo(id))\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(Todo);React offers react hooks which can be used as an alternative for connect(). You can use built-in hooks mainly useState, UseReducer and useContext and because of these you often may not require Redux.
But for large applications, you can use both redux and react hooks. it works great! React Hook is a useful new feature, and the addition of React-Redux with Redux-specific hooks is a great step towards simplifying Redux development.
\n","frontmatter":{"date":"July 17, 2020","updated_date":null,"description":"Learn about React state management and why we need state management and how to use it with React hooks and Redux in the best possible way.","title":"React state management: What is it and why to use it?","tags":["React","Redux","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ef27359624480604211f0e018dd47f18/bc59e/title-image.png","srcSet":"/static/ef27359624480604211f0e018dd47f18/69585/title-image.png 200w,\n/static/ef27359624480604211f0e018dd47f18/497c6/title-image.png 400w,\n/static/ef27359624480604211f0e018dd47f18/bc59e/title-image.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"What are HTTP Security Headers ? When we visit any website in the browser, the browser sends some request headers to the server and the…","fields":{"slug":"/engineering/http-security-headers/"},"html":"When we visit any website in the browser, the browser sends some request headers to the server and the server responds with HTTP response headers. These headers are used by the client and server to share information as a part of the HTTP protocol. Browsers have defined behavior of the web page according to these headers during communication with the server. These headers are mainly a combination of key-value pairs separated by a colon :. There are many HTTP headers, but here I'm covering some very useful web security headers, which will improve your website security.
As you know, nowadays too many data breaches are happening, many websites are hacked due to misconfiguration or lack of protection. These security headers will protect your website from some common attacks like XSS, code injection, clickjacking, etc. Additionally these headers increases your website SEO score.
\nHTTP Strict Transport Security security header helps to protect websites against man-in-the-middle attacks and cookie hijacking. Let's say, you have one website www.example.com and you have purchased SSL certification for migrating your website from HTTP to HTTPS. Now suppose old users are still opening your website using the HTTP, so they may redirect your HTTP users to HTTPS via redirection as a solution. Since visitors may first communicate with the non-encrypted version of the site before being redirected. This creates an opportunity for a man-in-the-middle attack. The HTTP Strict Transport Security header informs the browser that it should never load a site using HTTP and should automatically convert all attempts to access the site using HTTP to HTTPS requests.
Strict-Transport-Security: max-age=<expire-time>\n Strict-Transport-Security: max-age=<expire-time>; includeSubDomains\n Strict-Transport-Security: max-age=<expire-time>; preload| Directives | \nExplanation | \n
|---|---|
max-age=<expire-time> | \nThis directive allows us to specify the amount of time (in seconds) that the content of the header will be stored in the browser cache. | \n
includeSubDomains | \nIf this optional parameter is specified, this rule applies to all of the site's subdomains as well. | \n
Preload | \nThis is not part of the specifications. Please see the Preloading Strict Transport Security | \n
X-XSS header helps protect websites against script injection attacks. When an attacker injects malicious JavaScript code into an HTTP request for accessing confidential information such as session cookies, at that time HTTP X-XSS-Protection header can stop the browsers from loading suce web pages, whenever any detect is reflected cross-site scripting (XSS) attacks. XSS is a very common and effective attack.
\n X-XSS-Protection: 0 \n X-XSS-Protection: 1 \n X-XSS-Protection: 1; mode=block \n X-XSS-Protection: 1; report=<reporting-uri>| Attribute | \nDescription | \n\n | \n | \n |
|---|---|---|---|---|
0 | \nDisable the XSS Filtering | \n\n | \n | \n |
1 | \nEnable the XSS Filtering and remove the unsafe part | \n\n | \n | \n |
1; mode=block | \nBrowser prevents the entire page from rendering when an XSS attack is detected. | \n\n | \n | \n |
1; report=<reporting-URI> (Chromium only) | \nWhen a cross-site scripting attack is detected, the browser will remove the unsafe parts from the page and report the violation on the reporting URL. | \n\n | \n | \n |
The X-Frame-Options HTTP response header can be used to instruct the browser whether a web page should be allowed to render a <frame>, <iframe>, <embed> or <object> element on website or not.
This header protects users against ClickJacking attacks. An attacker uses multiple tricks to trick the user into clicking something different than what they think they’re clicking.
\n X-Frame-Options: DENY \n X-Frame-Options: SAMEORIGIN| Directives | \nExplanation | \n
|---|---|
DENY | \nThis will not allow to page rendering in the <frame>, <iframe>, <embed> or <object> | \n
SAMEORIGIN | \nThis will allow the page to only be displayed in a <frame>, <iframe>, <embed> or <object> on the same origin. | \n
X-Content-Type-Options response header prevents the browser from MIME-sniffing a response away from the declared content-type. A MIME-sniffing vulnerability allows an attacker to inject a malicious resource, such as a malicious executable script, Suppose an attacker changes the response for an innocent resource, such as an image. With MIME sniffing, the browser will ignore the declared image content type, and instead of rendering an image will execute the malicious script.
\nSyntax
\n X-Content-Type-Options: nosniff nosniff - Blocks a request if the request destination is of type:
Content-Security-Policy header is used to instruct the browser to load only the allowed content defined in the policy. This uses the whitelisting approach which tells the browser from where to load the images, scripts, CSS, applets, etc. If implemented properly, this policy prevents the exploitation of Cross-Site Scripting (XSS), ClickJacking, and HTML injection attacks.
\n Content-Security-Policy: <policy-directive>; <policy-directive>More information about the Content Security policy can be found on Mozilla’s website .
\nAs a web developer, you can follow this guide for adding security headers to your website. HTTP headers can be configured on the server to enhance the overall security of the web application. You can easily validate your website security headers. Multiple free online tools are available to check the same:
\nThese headers reduce the potential vulnerabilities of the application. Alongside these headers will add one layer of security still we need to add more layer's of security in our web application
\n","frontmatter":{"date":"July 15, 2020","updated_date":null,"description":"HTTP security headers are a fundamental part of website security. Upon implementation, they protect you against the types of attacks that your site is most likely to come across. These headers protect against XSS, code injection, clickjacking, etc. This article explains most commonly used HTTP headers in context to application security","title":"HTTP Security Headers","tags":["Security","HTTP Headers"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/bd7410a85a59f44b894624a2b98f28d4/f422e/http-security-headers.jpg","srcSet":"/static/bd7410a85a59f44b894624a2b98f28d4/f836f/http-security-headers.jpg 200w,\n/static/bd7410a85a59f44b894624a2b98f28d4/2244e/http-security-headers.jpg 400w,\n/static/bd7410a85a59f44b894624a2b98f28d4/f422e/http-security-headers.jpg 640w","sizes":"(max-width: 640px) 100vw, 640px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Have you ever heard of SonarQube? Would you like to know What it is? And how to use it? And its benefits to the production phase of software…","fields":{"slug":"/engineering/sonarqube/"},"html":"Have you ever heard of SonarQube? Would you like to know What it is? And how to use it? And its benefits to the production phase of software development. Then you are at the right place; in this tutorial of SonarQube, I will give you a walkthrough of every aspect of SonarQube.
\nLet's dive in!!!
\nSonarQube is an open-source platform developed by SonarSource for continuous inspection of code quality. Sonar does static code analysis, which provides a detailed report of bugs, code smells, vulnerabilities, code duplications.
\nIt supports 25+ major programming languages through built-in rulesets and can also be extended with various plugins.
\nDevelopers working with hard deadlines to deliver the required functionality to the customer. It is so important for developers that many times they compromise with the code quality, potential bugs, code duplications, and bad distribution of complexity.
\nAdditionally, they tend to leave unused variables, methods, etc. In this scenario, the code would work in the desired way.
\nDo you think this is a proper way to deliver functionality?
\nThe answer is NO.
\nTo avoid these issues in code, developers should always follow the good coding practice, but sometimes it is not possible to follow the rules and maintain the good quality as there may be many reasons.
\nIn order to achieve continuous code integration and deployment, developers need a tool that not only works once to check and tell them the problems in the code but also to track and control the code to check continuous code quality. To satisfy all these requirements, here comes SonarQube in the picture.
\nThis section will explain the steps or procedures to configure the sonarqube plugin for all the major programming languages.
\nThe only prerequisite for running SonarQube is to have Java (Oracle JRE 11 or OpenJDK 11) installed on your machine. [details]
\nSet the PATH system variable: How do I set or change the PATH system variable?
\n\n\nNote: In order to analyze JavaScript code, you need to have Node.js >= 8 installed on the machine running the scan. If a standard node is not available, you have to set the property
\nsonar.nodejs.executableto an absolute path to Node.js executable. [details]
To start the sonar server open cmd or terminal and set sonarqube bin folder path and choose the platform and run the following command. Examples :
\n#For Windows(cmd):\nC:\\sonarqube\\bin\\windows-x86-64>StartSonar.bat\n#For other OS (terminal): \nC:\\sonarqube\\bin\\[OS]>sonar.shOnce the sonar server up successfully, then Log in to http://localhost:9000 with System Administrator credentials (login=admin, password=admin).
http://localhost:9000/account/security page).Now copy the displaying command and Go to your project path and Run the copied command. It looks like below:
\nsonar-scanner.bat -D"sonar.projectKey=rtetre" -D"sonar.sources=."-D"sonar.host.url=http://localhost:9000" -D"sonar.login=e932dxxxxx9a8e5c7903xxxxxx96928xxxxxxx"After the analysis is done, you can either browse the provided link to see the sonar report directly [Ex.: http://localhost:9000/dashboard?id=] or go to the project section to see the newly generated sonar report of your project.
If you want to exclude some files from analysis(like test files), then go to the administration section and navigate to the General setting, select the programming language used, and set a list of file path patterns to be excluded from the analysis.
\nNow re-run the analysis command given above for an updated sonar report.
\nThe goal of SonarQube is to empower developers first and to grow an open community around the quality and security of code. I hope with this quick tutorial of sonarqube you have the basic idea of the functionalities, and If you believe so, drop a comment and show your support.
\n","frontmatter":{"date":"July 11, 2020","updated_date":null,"description":"SonarQube is a universal tool for static code analysis that has become more or less the industry standard. Keeping code clean, simple, and easy to read is also a lot easier with SonarQube.","title":"Sonarqube: What it is and why to use it?","tags":["Code Quality","SonarQube"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/d565ea49a97bb0cce8f1937aa87e64b7/ee604/sonarqube.png","srcSet":"/static/d565ea49a97bb0cce8f1937aa87e64b7/69585/sonarqube.png 200w,\n/static/d565ea49a97bb0cce8f1937aa87e64b7/497c6/sonarqube.png 400w,\n/static/d565ea49a97bb0cce8f1937aa87e64b7/ee604/sonarqube.png 800w,\n/static/d565ea49a97bb0cce8f1937aa87e64b7/f3583/sonarqube.png 1200w,\n/static/d565ea49a97bb0cce8f1937aa87e64b7/e4d72/sonarqube.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kheenvraj Lomror","github":"rajlomror","avatar":null}}}},{"node":{"excerpt":"In this blog, we’ll see how to create and validate a JWT(JSON Web Token) in Deno. For this, we’ll be using djwt, the absolute minimum…","fields":{"slug":"/engineering/jwt-authentication-with-deno/"},"html":"In this blog, we’ll see how to create and validate a JWT(JSON Web Token) in Deno. For this, we’ll be using djwt, the absolute minimum library to make JSON Web Tokens in deno and Oak framework
\nThis tutorial assumes you have:
\nJSON Web Token is an internet standard used to create tokens for an application. These tokens hold JSON data and are cryptographically signed.
\nHere is how a sample Json Web Token looks like
\neyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im9sYXR1bmRlZ2FydWJhQGdtYWlsLmNvbSIsImJWT is a good way of securely sending information between parties. Because JWTs can be signed—for, you can be sure the senders are who they say they are. And, as the signature is generated using the header and the payload, you can also verify that the content hasn't been tampered with.
\nJWT can contain user information in the payload and also can be used in the session to authenticate the user.
\nIf you want to know more about JSON Web Token, We have a very good article about it.
\nFirst, let's set up a Deno server to accept requests, for it, we are using Oak framework, it is quite simple and few lines of codes as you can see below.
\n// index.ts\nimport { Application, Router } from "https://deno.land/x/oak/mod.ts";\n\nconst router = new Router();\nrouter\n .get("/", (context) => {\n context.response.body = "JWT Example!";\n })\n\nconst app = new Application();\napp.use(router.routes());\napp.use(router.allowedMethods());\n\nawait app.listen({ port: 8000 });Once our program is ready for accepting request Let's import djwt functions to generate JWT token, In below code we can use a secret key, expiry time for JWT token in 1 hour from the time program will run and we are using HS256 algorithm.
\nAdd the below code in index.ts and update the router as shown below, you can now get a brand new token on http://localhost:8000/generate
// index.ts\n...\n\nimport { makeJwt, setExpiration, Jose, Payload } from "https://deno.land/x/djwt/create.ts";\n\nconst key = "secret-key";\nconst payload: Payload = {\n iss: "Jon Doe",\n exp: setExpiration(new Date().getTime() + 60000),\n};\nconst header: Jose = {\n alg: "HS256",\n typ: "JWT",\n};\n\n\nconst router = new Router();\nrouter\n .get("/", (context) => {\n context.response.body = "JWT Example!";\n })\n .get("/generate", (context) => {\n context.response.body = makeJwt({ header, payload, key }) + "\\n";\n })\n\n...Once you get a JWT token you can validate the token by validateJwt function in djwt, let us import the validateJwt and add one more route /validate/:token
Now you can verify any token by passing it to a route like - http://localhost:8000/validate/jwt_token (jwt_token is a placeholder, please replace it with a real JWT token)
// index.ts\n...\n\nimport { validateJwt } from "https://deno.land/x/djwt/validate.ts";\n\n...\n\nrouter\n .get("/", (context) => {\n context.response.body = "JWT Example!";\n })\n .get("/generate", (context) => {\n context.response.body = makeJwt({ header, payload, key }) + "\\n";\n })\n .get("/validate/:token", async (context) => {\n if ( context.params && context.params.token && (await validateJwt(context.params.token, key)).isValid) {\n context.response.body = "Valid JWT\\n";\n } else {\n context.response.body = "Invalid JWT\\n";\n }\n });\n\n...Now you know how to generate and verify a JWT token in Deno, you can easily use it in your application, The complete source code used in this blog can be found in this Github Repo
\n","frontmatter":{"date":"July 10, 2020","updated_date":null,"description":null,"title":"How to create and validate JSON Web Tokens in Deno","tags":["Deno","JWT","JSON Web Token"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.492537313432836,"src":"/static/4f62fb01daec253b0246b5ba0f244846/ee604/deno_jwt.png","srcSet":"/static/4f62fb01daec253b0246b5ba0f244846/69585/deno_jwt.png 200w,\n/static/4f62fb01daec253b0246b5ba0f244846/497c6/deno_jwt.png 400w,\n/static/4f62fb01daec253b0246b5ba0f244846/ee604/deno_jwt.png 800w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Puneet Singh","github":"puneetsingh24","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.