Writing a foolproof code is hard, especially with a team collaborating on a single project. Thus it becomes increasingly important to ensure that no new code breaks existing functionality. And for this purpose, automated tests are used.
\nIn this blog, we will learn how to integrate Jest and Puppeteer in our project for End-to-End Testing. Jest is a javascript testing framework maintained by Facebook. Puppeteer is a Node library created by Google, which provides a high-level API to control headless Chrome. Before we delve deeper into Jest and Puppeteer, let's familiarise ourselves with a few things.
\nEnd-to-End(E2E) Testing: E2E testing refers to the testing of a complete functionality of some application. It checks that a functionality acts as intended.
\nHeadless Testing: Headless testing is a way or running browser UI tests without any browser UI. It is a preferred method mainly due to its performance. It is fast, light-weight, and less resource-intensive.
\nTo install Jest and Puppeteer, open the command line in your project directory and run:
\nFor npm users:
\nnpm install --save-dev jest puppeteer jest-puppeteer
For yarn users:
\nyarn add --dev jest puppeteer jest-puppeteer.
Now that we've installed Jest and Puppeteer, it is time to set up the testing environment. Create a file jest.config.js in the project root directory and write the following code in it:
module.exports = {\n preset: "jest-puppeteer",\n globals: {\n URL: "http://localhost:8080"\n },\n testMatch: [\n "<path-to-the-tests-folder>/**.test.js"\n ],\n verbose: true\n};Defining the preset sets up a puppeteer environment for testing. Test match directs it to the folder where tests are defined, for a piece of more detailed knowledge about running Jest with Puppeteer check this out.
\nNow create a file jest-puppeteer.config.js in the project root directory. Here we define the testing environment further. To begin with you can add the following in this file:
module.exports = {\n launch: {\n headless: process.env.HEADLESS !== 'false',\n slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0,\n devtools: true\n }\n}Now we can begin writing our tests. In this example, we'll start writing a basic test to check the title of the page opened. Now head over to the tests folder defined and create a file title.test.js. As you might have noticed, .test.js would be the file extension of the jest tests defined.
This is what a typical title.test.js would look like:
// Defining the timeout for the test\nconst timeout = process.env.SLOWMO ? 6000 : 4000;\nconst fs = require('fs');\n\n// Go to the specified path and wait for the domcontent to load before running the tests\nbeforeAll(async () => {\n path = fs.realpathSync('file://<file-path>');\n await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});\n});\n\ndescribe('Title of the page', () => {\n test('Title of the page', async () => {\n // Gets page title\n const title = await page.title();\n // Compares it with the intended behaviour\n expect(title).toBe('<title-of-the-page>');\n\n }, timeout);\n});Hurray! You've added Headless UI tests to your project. Now you can similarly define tests for different functionalities using the docs here.
\nIt could give a sandbox-ing error if you run it in a container without a defined user. When running headless Chrome in a container without a defined user, the chromeOptions environment property needs a --no-sandbox args (in addition to the other headless args), or Chrome won't be able to startup. The possible solutions to this are:
\nargs: ['--no-sandbox'] in jest-puppeteer.config.js (not recommended).sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget Happy coding! =)
\n","frontmatter":{"date":"October 15, 2020","updated_date":null,"description":"Learn how to integrate Jest and Puppeteer in your project for End-to-End Testing.","title":"End-to-End Testing with Jest and Puppeteer","tags":["Testing","Jest","Puppeteer"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6129032258064515,"src":"/static/bc9e7eb8f88f913bb3f3ba67edf01319/01a28/jest-puppeteer.png","srcSet":"/static/bc9e7eb8f88f913bb3f3ba67edf01319/69585/jest-puppeteer.png 200w,\n/static/bc9e7eb8f88f913bb3f3ba67edf01319/497c6/jest-puppeteer.png 400w,\n/static/bc9e7eb8f88f913bb3f3ba67edf01319/01a28/jest-puppeteer.png 799w","sizes":"(max-width: 799px) 100vw, 799px"}}},"author":{"id":"Shreya Sharma","github":"cypherean","avatar":null}}}},{"node":{"excerpt":"A Few Ways to Speed Up Your Python Code Python is one of the most popular languages all over the world. Nowadays it is being used in…","fields":{"slug":"/engineering/speed-up-python-code/"},"html":"Python is one of the most popular languages all over the world. Nowadays it is being used in competitive programming also because of its simple syntax and rich libraries. Most of us probably started coding with python. At first, everything goes simple and easy. But while solving a hard algorithmic problem, most of us suffer from Time Limit Exceeded. However, it is not a problem of python; it is the programmer's problem. I am not saying that language is not slow, but if a programmer writes an efficient programme, it will get Accepted for sure. Here are some tips to speed up your python programme.
Use of proper data structure has a significant effect on runtime. Python has list, tuple, set and dictionary as the built-in data structures. However, most of the people use the list in all cases. But it is not a right choice. Use proper data structures depending on your task. Especially use a tuple instead of a list. Because iterating over tuple is easier than iterating over a list.
\nAs for loop is dynamic in python, it takes more time than while loop. So, use while loop instead of for loop.
\nDo not use any other technique if you can use list comprehension. For example, here is a code to list all the numbers between 1 and 1000 that is the multiplier of 3:
\nL = []\nfor i in range (1, 1000):\n if i%3 == 0:\n L.append (i)Using list comprehension, it would be:
\nL = [i for i in range (1, 1000) if i%3 == 0]List comprehension works faster than using the append method.
\nDo not assaign variables like this:
\na = 2\nb = 3\nc = 5\nd = 7Instead, assign variables like this:
\na, b, c, d = 2, 3, 5, 7Python has global keyword to declare global variables. But global variables take higher time during operation than a local variable. So, do not use global variables if it is not necessary.
Do not write your function (manually) if it is already in the library. Library functions are highly efficient, and you will probably won't be able to code with that efficiency.
\nIn python, you can concatenate strings with + operation.
concatenatedString = "Programming " + "is " + "fun."It can also be done with join() method.
concatenatedString = " ".join (["Programming", "is", "fun."])join() concatenates strings faster than + operation because + operators create a new string and then copies the old content at each step. But join() doesn't work that way.
If you have a large amount of data in your list and you need to use one data at a time and for once then use generators. It will save you time.
See the below code:
\nL = []\nfor element in set(L):\n ...The above code may seem efficient because it used set to delete duplicate data. But the reality is that the code is not efficient. Do not forget that converting a list into set takes time. So this code will work better than the previous:
\nfor element in L:\n ...Try to avoid dot operation. See the below programme.
\nimport math\nval = math.sqrt(60)Instead of the above style write code like this:
\nfrom math import sqrt\nval = sqrt(60)Because when you call a function using . (dot) it first calls __getattribute()__ or __getattr()__ which then use dictionary operation which costs time. So, try using from module import function.
Use while 1 instead of while True. It will reduce some runtime.
Try new ways to write your code efficiently. See the below code.
\nif a_condition:\n if another_condition:\n do_something\nelse:\n raise exceptionInstead of the above code you can write:
\nif (not a_condition) or (not another_condition):\n raise exception\ndo_somethingFor python's slow speed, some projects have been taken to decrease runtime. Pypy and Numba two of them. In most of the programming contests, you will see pypy if it allows python. These applications will reduce the runtime of your programme.
\nC/C++ is faster than python. So, many packages and modules have been written in C/C++ that you can use in your python programme. Numpy, Scipy and Pandas are three of them and are popular for processing large datasets.
Python is updated and upgraded regularly, and every release is faster and more optimized. So always use the latest version of python.
\nThese were some of the tips to decrease the runtime of python code. There are a few more techniques that you can use. Use a search engine to find those and write efficient code!
\n","frontmatter":{"date":"October 15, 2020","updated_date":null,"description":"Learn a few ways to speed up your python code.","title":"Speed Up Python Code","tags":["Python","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/80999ea5cffd2a5ffbfe1622f4b9c068/14b42/speed-up-python-code-1.jpg","srcSet":"/static/80999ea5cffd2a5ffbfe1622f4b9c068/f836f/speed-up-python-code-1.jpg 200w,\n/static/80999ea5cffd2a5ffbfe1622f4b9c068/2244e/speed-up-python-code-1.jpg 400w,\n/static/80999ea5cffd2a5ffbfe1622f4b9c068/14b42/speed-up-python-code-1.jpg 800w,\n/static/80999ea5cffd2a5ffbfe1622f4b9c068/47498/speed-up-python-code-1.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Md. Tahmid Hossain","github":"tahmid02016","avatar":null}}}},{"node":{"excerpt":"Build a Twitter Bot with NodeJs Hey there! In this blog post, we will build a twitter bot that let us tweet using the command line directly…","fields":{"slug":"/engineering/build-a-twitter-bot-using-nodejs/"},"html":"Hey there! In this blog post, we will build a twitter bot that let us tweet using the command line directly.
\n\n\n\n
We will use twitter - a client library for the Twitter REST and Streaming APIs. This npm package will make the whole process of building the bot a whole lot easier and faster.
\nTo be able to access Twitter API, you need a Twitter Developer Account. Apply for it here. Click on Apply for a Developer Account.
\nIt will ask you to log in. Select appropriate settings after logging in. It will also generate keys and secret tokens like Consumer Key, Consumer Secret, Access Token Key, Access Token Secret. Copy and save them somewhere for future use.
\nMake a project folder with any name of your choice. Run npm init to initialize the project. This will generate a package.json file in your directory. Alternatively, you can run npm init -y to setup your project with default settings.
\n\n\n
package.jsonholds all the dependencies of a project.
Since our project will be dependent on twitter client library, it's time we install this dependency in our project. Run npm install twitter to include this in your package.json .
Now we will start with the actual coding part. At the moment, your project folder will have a node_modules folder, a package.json file, and a package-lock.json file. If you have gone with the default options while running npm init, then index.js is the file we will be working upon.
Open index.js. To be able to use the twitter library, which we have installed, you need to include it in index.js.
var Twitter = require('twitter');
Also, remember the keys and tokens you got from Twitter Developer Portal? It's time we use them.
\nvar client = new Twitter({\n\tconsumer_key: process.env.CONSUMER_KEY,\n\tconsumer_secret: process.env.CONSUMER_SECRET,\n\taccess_token_key: process.env.ACCESS_TOKEN_KEY,\n\taccess_token_secret: process.env.ACCESS_TOKEN_SECRET\n});Do not add your Consumer or Access Token keys or secrets directly in the index.js. These should be managed accordingly using environment variables.
\n\nWe will use
\ndotenvlibrary to manage our environment variables in NodeJS. Runnpm install dotenvand follow these instructions. Your.envwill look something like this.
CONSUMER_KEY=........................................\nCONSUMER_SECRET=.....................................\nACCESS_TOKEN_KEY=....................................\nACCESS_TOKEN_SECRET=.................................I will use Official Joke API to automatically fetch content for my tweet. You can visit the repository and learn more about the endpoints. But the only endpoint we will work with is random_joke. Click on this, and you will receive a JSON response with fields id, type, setup, and punchline. The fields we are concerned with are setup and punchline.
\nWe will use axios for calling the API endpoint. Run npm install axios and add var axios = require('axios'); in index.js.
Now everything has been laid out. We need to connect the dots. The Official Joke API will return a JSON response. We will grab the required data, i.e., the setup and the punchline from it. And then make use of client.post functionality of twitter package.
\naxios("https://official-joke-api.appspot.com/random_joke").then(Response => {\n\treturn [Response.data.setup, Response.data.punchline];\n}).then(([setup, punch]) => {\n\tclient.post('statuses/update', {status: `${setup}\\n${punch}`}, function(error, tweet, response){\n\t\tif(!error){\n\t\t\tconsole.log(tweet);\n\t\t}\n\t})\n});Now run node index.js on the terminal and see the output.\nIf everything went well, you would see a tweet response, otherwise an error message. The successful message would look something like this.
At this point, your index.js should look like this.
\nThat's it! You have created your first Twitter Bot, which tweets content after directly calling it from an API. You might take a look at the repository if you encountered any errors. Here, I have used different APIs to fetch content and tweet. Moreover, I have added a script that will search posts with a particular hashtag and like them.
\n\n\nWhile pushing your code to GitHub, make sure to add
\n.gitignorefile and includenode_modulesand.envin it.
\n\nThe world is yours to explore.
\n
And the dev world is based entirely on exploring technologies and frameworks. Play with this twitter library and see what interesting stuff can be built with it. Maybe, search tweets with a particular hashtag and like them? Or maybe, retweet tweets of any particular user? You are free to use your imagination and coding skills to explore more and more. If axios and dotenv are new to you, then go ahead and read their documentation. Get hold of the concepts of environment variables. And come up with your own cool Twitter Bot.
\n\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"description":"Learn how to create a twitter bot using NodeJS that let us tweet using the command line directly","title":"Build A Twitter Bot Using NodeJS","tags":["NodeJs","Twitter","Bot"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/73b57d06f8809fab5ebb6ad89ab328ef/14b42/cover.jpg","srcSet":"/static/73b57d06f8809fab5ebb6ad89ab328ef/f836f/cover.jpg 200w,\n/static/73b57d06f8809fab5ebb6ad89ab328ef/2244e/cover.jpg 400w,\n/static/73b57d06f8809fab5ebb6ad89ab328ef/14b42/cover.jpg 800w,\n/static/73b57d06f8809fab5ebb6ad89ab328ef/47498/cover.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vineeta Jain","github":"Ninjavin","avatar":null}}}},{"node":{"excerpt":"Motivation Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data…","fields":{"slug":"/engineering/visualizing-data-using-leaflet-and-netlify/"},"html":"Keep in mind Twitter's Developer Policy & Terms and Twitter Terms & Conditions. These should not be violated in whatever project you are building.
\n
Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data better and derive better insights.
\nDifferent map visualizations can highlight different aspects of a dataset. Heatmaps, Choropleth maps and Clustering maps are frequently used for this purpose.
\nIn this blog, I shall go over using a powerful JavaScript library to build a web map and deploy it on Netlify.
\nThe Leaflet is a great library for implementing interactive web maps as it provides many UI features, like smooth canvas panning, zooming, mouse events, and all the involved work in animations, which one would otherwise have to implement from scratch.
\n\n\nLeaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.
\nsource: leafletjs.com
\n
We can include Leaflet in our application by including the CSS stylesheet and the JS file from the unpkg CDN. Let's start building the application by starting with the following code at the project root. Create a file named index.html and put the following markup in it. The map shall be rendered in div#mapid.
<!--index.html-->\n<!DOCTYPE html>\n<html lang="en">\n\n <head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>MapViz</title>\n <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />\n <style>\n #mapid {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n </style>\n </head>\n\n <body>\n <div id="mapid"></div>\n <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n </body>\n\n</html>Now, we gather a link to the GeoJSON file for metro stations in Washington D.C., that we shall be visualizing, from the MapBox documentation. It should look similar to the following:
\nhttps://docs.mapbox.com/help/data/stations.geojsonCreate a new JavaScript file named script.js in the same directory as the HTML file. Include this file in the web page by adding the following line to it.
<!--index.html-->\n ...\n <body>\n ...\n <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n <script src="script.js"></script>\n </body>\n ...In script.js, we can use the Fetch API to make an AJAX request and get the data as a response to a GET request using promises and take a look at what we are dealing with.
// script.js\nlet data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nfetch(dataUrl)\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(err => console.error(err));We can take a look at the data in the Developer Console. We observe that it is a JavaScript object. The various properties associated with the data can be viewed by checking the individual features.
\n{\n "type": "FeatureCollection",\n "features": [\n ...\n {\n "geometry": {\n "type": "Point",\n "coordinates": [-76.9750541388, 38.8410857803]\n },\n "type": "Feature",\n "properties": {\n "description": "Southern Ave",\n "marker-symbol": "rail-metro",\n "title": "Southern Ave",\n "url": "http://www.wmata.com/rider_tools/pids/showpid.cfm?station_id=107",\n "lines": ["Green"],\n "address": "1411 Southern Avenue, Temple Hills, MD 20748"\n }\n },\n ...\n ]\n}Before we begin adding the layers to our map, we need to instantiate a Leaflet map object with the DOM ID of the map container and center it on our point of interest at a specified initial zoom level.
const map = L.map('mapid').setView([38.8977, -77.0365], 15);As we need a base map (the base layer) for our map, we can use one that is provided by Mapbox. In order to use that, you need a Mapbox API access token that you can create on their portal.
\nThe following snippet instantiates a tileLayer object and adds it to our map:
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n maxZoom: 18,\n id: 'mapbox/streets-v11',\n tileSize: 512,\n zoomOffset: -1,\n accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);We can use the following snippet to parse the GeoJSON and add it to the map.
\nL.geoJSON(data).addTo(map);Replace the code in script.js with the following, and refresh the web page:
let data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nconst map = L.map('mapid').setView([38.8977, -77.0365], 15);\n\nL.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n maxZoom: 18,\n id: 'mapbox/streets-v11',\n tileSize: 512,\n zoomOffset: -1,\n accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);\n\nfetch(dataUrl)\n .then(response => response.json())\n .then(data => {\n L.geoJSON(data).addTo(map);\n })\n .catch(err => console.error(err));As the dataset contains Point features, markers will be added at the respective coordinates. Our web page will now look like the following:
Now, we can move on to deploy this web page on Netlify.
\nNetlify is an awesome platform to host your web applications. It also offers many other features such as serverless functions.
\nOnce you have pushed your web page to a Git repository, hosted either on GitHub, GitLab or BitBucket, navigate to Netlify and click on the New Site from Git button.
\nNext, select your Git provider and your repository:
\nGo ahead with the defaults, and now your site shall be published on Netlify, and all future pushes should result in a Netlify deployment:
\nNice! Now we have a web map, even though a very basic one, live! Check out the Leaflet documentation for more!
\nDemonstration: Priceless Poincare
\nGitHub: leaflet netlify starter
\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"description":"Let's visualize geospatial data on the web using Leaflet and host it on Netlify!","title":"Visualizing Data using Leaflet and Netlify","tags":["GIS","Serverless","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0618556701030926,"src":"/static/2bf4fa98946c3aaa9aff33c4859f3bda/14b42/map.jpg","srcSet":"/static/2bf4fa98946c3aaa9aff33c4859f3bda/f836f/map.jpg 200w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/2244e/map.jpg 400w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/14b42/map.jpg 800w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/47498/map.jpg 1200w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/1abfa/map.jpg 1366w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudipto Ghosh","github":"sudiptog81","avatar":null}}}},{"node":{"excerpt":"Introduction The Secure Enclave is a hardware-based key manager that’s isolated from the main processor to provide an extra layer of…","fields":{"slug":"/engineering/secure-enclave-ios-app/"},"html":"The Secure Enclave is a hardware-based key manager that’s isolated from the main processor to provide an extra layer of security. Using a secure enclave, we can create the key, securely store the key, and perform operations with the key. Thus makes it difficult for the key to be compromised.
\nWe usually save data persistently in the app using UserDefaults, Keychain, Core Data or SQLite.\nFor example, To save the session of logged in user, we save username and password. But this process puts our data at high-security risk. So it's always recommended to store sensitive data in an encrypted format. But again, it's a challenge to secure keys used in encryption/decryption.
\nNow here Secure Enclave comes in the role.
\nIn this blog, we will use Secure Enclave to generate key pair and use those in encryption/decryption of sensitive data further.
\nHere I will create a wrapper to generate key pair using Secure Enclave and use them to encrypt/decrypt sensitive data. And also a viewcontroller to show how to use a wrapper to get encrypted and decrypted data.\nYou may implement wrapper's methods as common methods and use wherever needed in the project. But its recommended to use a separate wrapper for handling communication with Secure Enclave.
\nI have created .h and .m files named as SecEnclaveWrapper as a subclass of NSObject.\nIn .h file I am declaring function for being accessible from other classes like:
\n/**\nReturn encrypted value of data using kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM algo\n*/\n- (NSData *_Nonnull)encryptData:(NSData *_Nonnull)data ;\n\n/**\nReturn decryrpted data of encrypted data using kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM algo\n*/\n- (NSData *_Nonnull)decryptData:(NSData *_Nonnull)data ;\n\n/**\nReturn an initialized instance of the wrapper\n*/\n- (instancetype)init;Then in .m file, define the following methods as :
\nThe method init initializes and returns the object of this wrapper class. And 'encryptData' and 'decryptData' method return encrypted data and decrypted data of encrypted data, respectively.
- (instancetype)init {\n self = [super init];\n \n if(![self lookupPublicKeyRef] || ![self lookupPrivateKeyRef])\n [self generatePasscodeKeyPair];\n \n return self;\n}\n- (NSData *)encryptData:(NSData *)data {\n if (data && data.length) {\n \n CFDataRef cipher = SecKeyCreateEncryptedData(publicKeyRef, kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM, (CFDataRef)data, nil);\n \n return (__bridge NSData *)cipher;\n } else {\n return nil;\n \n }\n}\n- (NSData*)decryptData:(NSData *)data {\n \n if(data && data.length){\n \n CFDataRef plainData = SecKeyCreateDecryptedData(privateKeyRef, kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM, (CFDataRef)data, nil);\n return (__bridge NSData *)plainData;\n }\n else {\n return nil;\n }\n}The 'lookupPublicKeyRef' method below will lookup keychain for public key & 'lookupPrivateKeyRef' method search for the private key and return key if found.
\n- (SecKeyRef) lookupPublicKeyRef\n{\n OSStatus sanityCheck = noErr;\n NSData *tag;\n id keyClass;\n \n if (publicKeyRef != NULL) {\n // if already resides in memory, return\n return publicKeyRef;\n }\n tag = [kPublicKeyName dataUsingEncoding:NSUTF8StringEncoding];\n keyClass = (__bridge id) kSecAttrKeyClassPublic;\n \n \n NSDictionary *queryDict = @{\n \n (__bridge id) kSecClass : (__bridge id) kSecClassKey,\n (__bridge id) kSecAttrKeyType : (__bridge id) kSecAttrKeyTypeEC,\n (__bridge id) kSecAttrApplicationTag : tag,\n (__bridge id) kSecAttrKeyClass : keyClass,\n (__bridge id) kSecReturnRef : (__bridge id) kCFBooleanTrue\n };\n //else look key in keychain and return\n sanityCheck = SecItemCopyMatching((__bridge CFDictionaryRef) queryDict, (CFTypeRef *) &publicKeyRef);\n if (sanityCheck != errSecSuccess) {\n NSLog(@"Error trying to retrieve key from server. sanityCheck: %d", (int)sanityCheck);\n }\n \n return publicKeyRef;\n}\n- (SecKeyRef) lookupPrivateKeyRef\n{\n CFMutableDictionaryRef getPrivateKeyRef = newCFDict;\n CFDictionarySetValue(getPrivateKeyRef, kSecClass, kSecClassKey);\n CFDictionarySetValue(getPrivateKeyRef, kSecAttrKeyClass, kSecAttrKeyClassPrivate);\n CFDictionarySetValue(getPrivateKeyRef, kSecAttrLabel, kPrivateKeyName);\n CFDictionarySetValue(getPrivateKeyRef, kSecReturnRef, kCFBooleanTrue);\n \n OSStatus status = SecItemCopyMatching(getPrivateKeyRef, (CFTypeRef *)&privateKeyRef);\n if (status == errSecItemNotFound)\n return nil;\n \n return (SecKeyRef)privateKeyRef;\n}The following methods will actually deal with Secure Enclave to generate a private key and public key.
\n- (bool) generatePasscodeKeyPair\n{\n CFErrorRef error = NULL;\n SecAccessControlRef sacObject = SecAccessControlCreateWithFlags(\n kCFAllocatorDefault,\n kSecAttrAccessibleAfterFirstUnlockThisDeviceOnly,\n kSecAccessControlPrivateKeyUsage,\n &error\n );\n \n if (error != errSecSuccess) {\n NSLog(@"Generating key pair, error: %@\\n", error);\n }\n \n return [self generateKeyPairWithAccessControlObject:sacObject];\n}\n\n- (bool) generateKeyPairWithAccessControlObject:(SecAccessControlRef)accessControlRef\n{\n // create dictionary of private key \n CFMutableDictionaryRef accessControlDict = newCFDict;;\n#if !TARGET_IPHONE_SIMULATOR\n \n CFDictionaryAddValue(accessControlDict, kSecAttrAccessControl, accessControlRef);\n#endif\n CFDictionaryAddValue(accessControlDict, kSecAttrIsPermanent, kCFBooleanTrue);\n CFDictionaryAddValue(accessControlDict, kSecAttrLabel, kPrivateKeyName);\n \n // create dictionary for saving key into keychain\n CFMutableDictionaryRef generatePairRef = newCFDict;\n#if !TARGET_IPHONE_SIMULATOR\n \n CFDictionaryAddValue(generatePairRef, kSecAttrTokenID, kSecAttrTokenIDSecureEnclave);\n#endif\n CFDictionaryAddValue(generatePairRef, kSecAttrKeyType, kSecAttrKeyTypeEC);\n CFDictionaryAddValue(generatePairRef, kSecAttrKeySizeInBits, (__bridge const void *)([NSNumber numberWithInt:256]));\n CFDictionaryAddValue(generatePairRef, kSecPrivateKeyAttrs, accessControlDict);\n \n OSStatus status = SecKeyGeneratePair(generatePairRef, &publicKeyRef, &privateKeyRef);\n \n if (status != errSecSuccess){\n NSLog(@"Error trying to retrieve key from server. sanityCheck: %d", (int)status);\n \n return NO;\n }\n [self savePublicKeyFromRef:publicKeyRef];\n return YES;\n}The private key is generated and stored in Secure Enclave which cannot be directly used. Whereas public key have to be stored manually in keychain by following method.
\n- (bool) savePublicKeyFromRef:(SecKeyRef)publicKeyRef\n{ OSStatus sanityCheck = noErr;\n NSData *tag;\n id keyClass;\n \n \n tag = [kPublicKeyName dataUsingEncoding:NSUTF8StringEncoding];\n keyClass = (__bridge id) kSecAttrKeyClassPublic;\n \n \n NSDictionary *saveDict = @{\n \n (__bridge id) kSecClass : (__bridge id) kSecClassKey,\n (__bridge id) kSecAttrKeyType : (__bridge id) kSecAttrKeyTypeEC,\n (__bridge id) kSecAttrApplicationTag : tag,\n (__bridge id) kSecAttrKeyClass : keyClass,\n (__bridge id) kSecValueData : (__bridge NSData *)SecKeyCopyExternalRepresentation(publicKeyRef,nil),\n (__bridge id) kSecAttrKeySizeInBits : [NSNumber numberWithUnsignedInteger:256],\n (__bridge id) kSecAttrEffectiveKeySize : [NSNumber numberWithUnsignedInteger:256],\n (__bridge id) kSecAttrCanDerive : (__bridge id) kCFBooleanFalse,\n (__bridge id) kSecAttrCanEncrypt : (__bridge id) kCFBooleanTrue,\n (__bridge id) kSecAttrCanDecrypt : (__bridge id) kCFBooleanFalse,\n (__bridge id) kSecAttrCanVerify : (__bridge id) kCFBooleanTrue,\n (__bridge id) kSecAttrCanSign : (__bridge id) kCFBooleanFalse,\n (__bridge id) kSecAttrCanWrap : (__bridge id) kCFBooleanTrue,\n (__bridge id) kSecAttrCanUnwrap : (__bridge id) kCFBooleanFalse\n };\n sanityCheck = SecItemAdd((__bridge CFDictionaryRef) saveDict, (CFTypeRef *)&publicKeyRef);\n if (sanityCheck != errSecSuccess) {\n NSLog(@"Error trying to retrieve key from server. sanityCheck: %d", (int)sanityCheck);\n \n }\n \n return publicKeyRef;\n}Now I am creating ViewController.h and .m files. In viewDidLoad in .m file, having a string to be stored in UserDefaults. I will encrypt this string by a private key generated above and then store persistently encrypted data for later use.
\n- (void)viewDidLoad {\n [super viewDidLoad];\n NSString *strDatatosave = @"example data to save";\n NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];\n NSString *strGroupID = [NSString stringWithFormat:@"group.%@",bundleIdentifier];\n SecEnclaveWrapper *keychainItem = [[SecEnclaveWrapper alloc] init];\n \n NSData *encrypted = [keychainItem encryptData:[strDatatosave dataUsingEncoding:NSUTF8StringEncoding]];\n NSString *strEncrypted = [[NSString alloc] initWithData:encrypted encoding:NSUTF8StringEncoding];\n NSLog(@"encrypted string %@",strEncrypted);\n \n NSData *decrypted =[keychainItem decryptData:encrypted];\n NSString *strDecrypted = [[NSString alloc] initWithData:decrypted encoding:NSUTF8StringEncoding];\n \n NSLog(@"decrypted string as real string%@",strDecrypted);\n\n}In this blog, we learned about the basics of key generation via Secure Enclave and encryption and decryption using keys.\nBy default, key-pairs are generated in the Secure Enclave. The private key is available only at creation time and can not be obtained later as it is saved in Secure Enclave. Operations can be performed with it without exposing it to user code. Only Public Key will be stored and retrieved.
\nYou can find the complete repository link here
\nThanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:
\n\n","frontmatter":{"date":"October 13, 2020","updated_date":null,"description":"SecureEnclaveDemo is an xcode project containing helper named as SecEnclaveWrapper. You can use this wrapper in your project to encrypt/decrypt sensitive data using Secure Enclave. Let's understand more about in the blog.","title":"Secure Enclave in iOS App","tags":["ios","security","data","encryption","private key","xcode"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/69f1d98b07ca23af682918f3250280ff/14b42/CoverImage.jpg","srcSet":"/static/69f1d98b07ca23af682918f3250280ff/f836f/CoverImage.jpg 200w,\n/static/69f1d98b07ca23af682918f3250280ff/2244e/CoverImage.jpg 400w,\n/static/69f1d98b07ca23af682918f3250280ff/14b42/CoverImage.jpg 800w,\n/static/69f1d98b07ca23af682918f3250280ff/9842e/CoverImage.jpg 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Tanvi Jain","github":"tanvijn","avatar":null}}}},{"node":{"excerpt":"What is STL? STL stands for Standard Template Library. If you've used C++ even in small projects, you've likely already used STL - which is…","fields":{"slug":"/engineering/cpp-stl-containers/"},"html":"STL stands for Standard Template Library. If you've used C++ even in small projects, you've likely already used STL - which is a great thing! Using STL in C++ makes your code more expressive, simple, and easy to understand. This post will give you an overview of how STL works, some examples, and the basic knowledge you need to get started!
\nLoosely speaking, the first components you'd typically understand and use of STL are Containers & Algorithms. Then there's also Iterators & Functors, but you should try to take them on one by one, in that order perhaps. This blog will expand a bit on STL Containers.
\nSuppose you are at your favorite cinema hall and it's the launch of a big movie. Since it's the launch, there are likely many people waiting in line to buy their tickets. Naturally, you join the queue at the back and wait for your turn. In the computing world, we have a queue too! This is a popular data structure. If you've had a Data Structures class before, you are most likely familiar with some other data structures as well. These are often used, so the STL provides a great implementation of all these data structures, otherwise known as containers.
\nTake arrays, for example. Arrays are elements with the same type, stored in contiguous blocks of memory. In C++, you can use arrays as you would in C, like this:
\nstd::string students[10];\nstudents[0] = "Adam";But wait, STL provides a container for arrays too. It's available in the header <array>. Example usage of it would look like this:
#include <iostream>\n#include <string>\n\nint main() {\n std::array<std::string, 10> students;\n students[0] = "Adam's Friend";\n \n cout << students[0] << endl;\n}So, what's the difference? Why should you use the STL Container class? The performance difference is negligible, but what makes the container classes better is that it is a class. A wrapper class around normal arrays, and offers some advantages like passing by values, bounds checking, etc. As a side note, you'd normally want to use an std::vector instead - which is a dynamically resizable array.
Other containers in C++ include:
\nSequence containers: (accessibility in a sequential manner)
\nstd::arraystd::vector: Dynamically resizable arrays.\nArrays have a set size, while std::vector doesn't. You can keep adding elements in contigious blocks of memory. For example:
std::vector<std::string> students;\nstudents.push_back("Paul");\nstudents.push_back("Jack");Paul & Jack are stored in contiguous memory blocks, even though we didn't provide a specific limit at the start - as we do with arrays.
\nstd::forward_list: Singly linked-list.
A -> B -> C -> DThis is a simple example of linked-lists. Once you're at a point, let's say \"C\" - you can only go forwards.
\nstd::list: Doubly linked-list.
A <-> B <-> C <-> DAbove is a simple example of a doubly linked-list. Unlike Singly linked-lists, if you're at \"C\", you can go either way. To \"B\" or \"D\".
\nstd::deque: Double-ended queues - insertion and removal possible at both ends.Container Adaptors: (different interface of accessibility from sequence containers)
\nstd::queue: A standard queue, where removals are done from the front, and insertions are done at the end. The queue is a FIFO structure (First in, First out).std::priority_queue: A queue in which elements can have a varying level of importance. The ones with the highest importance are at the front, and thus processed first.\nFor example, let's say you're at a barbershop. A person arrived after you. If that person would've made a prior appointment to the shop, he would automatically be placed ahead of you with more \"importance\". Priority queues work similarly.std::stack:\nSuppose you have a pile of 10 books. If you need a book from middle - of course, like most people, you will pull it right from the middle in one go. Let's think about how computers would take this problem. A computer needs a step-by-step instruction, so the first thing it would do is remove the book from the top. And continue to do that until it reaches the book. To keep books as they were again, it would place books one by one at the top of the pile.\nThus, insertions and removals in a stack are only done at the \"top\". Associative containers: (sorted in a specific order, these containers boast search speeds of O(log N))
\nstd::set: Each element inserted into a set is it's own identifier, meaning that unique elements are entered. Each element acts as it's own \"key\" - which uniquely identifies it. For example, suppose you are a volunteer for entering student information for new students entering into the semester. They are uniquely identified by their roll numbers. Suppose you enter the same student's Roll No (the ID) twice into a set, it will be inserted just once - because a \"set\" can only have unique values.std::multiset: Like a set, but here the same multiple elements are allowed. Entering the roll no from before twice into an std::multiset will result in it being added twice.std::map: Take a literal map, for example. When you point to a location on the map, it tells you the details. The \"point\" is the key, and the details of that location are the \"values\". The keys are unique, and values can be anything. An std::map works the same way. Perhaps an example will help understanding more about it:// This maps a student name to his marks. But is this correct?\nstd::map<std::string, int> mapOfStudentNameToMarks;\n// The answer is no. A student's name isn't necessarily unique, multiple students with the same name will have a clash this way.\n// Thus, the correct way would be:\n\nstd::map<int, int> mapOfStudentIDToMarks; // This is correct, because StudentIDs are unique!\n\nmapOfStudentIDToMarks[1] = 100; // StudentID 1 -> 100 Marks.std::multimap: Can you guess what this might do, based on std::multiset?\nMultimap allows multiple elements to have the same key. So, for example, 10 -> 100 & 10 -> 150 are both valid for a multimap.Unordered Associative containers: (like associative containers, but implemented as hash-tables. They can be accessed at O(1), i.e., constant time.
\nstd::unordered_setstd::unordered_multisetstd::unordered_mapstd::unordered_multimap\n-- Containers aren't the only part of STL. It is huge! You are encouraged to read up more on STL, as it makes your life easier in every manner! You don't need to reinvent the wheel. Next, you could try looking up the various algorithms contained in the STL. They're present in the header file <algorithm>. Good luck on your journey!
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.