tiktok

,

Escaping TikTok's iOS Browser Sandbox (iOS Shortcut)

,

Update 3 03/19/2023: Over the past few months, TikTok updated their app to include an option to open links in the default browser versus forcing users to stay in the in-app browser. To do this, visit a link in the TikTok app and tap the three dots (…). Choose “default browser” from the list of options and it will launch your phone’s default web browser. As a result, this shortcut now has little practical use. This will be the final update regarding this post.

Update 2 03/19/2022: Added action to restore original functionality. Shortcut link in article has been updated.


Update 1 03/19/2022: The most recent version of iOS (15.4 at the time of this writing) has broken the Shortcut and only extracts the first line of text of the screenshot passed into it. I’m working to update the Shortcut and restore functionality.

I finally got fed up with TikTok’s hostile UX and locking iOS users to using only TikTok’s in-app web browser when visiting creators’ independent websites on their TikTok profiles. I call it hostile behavior because of the difficulty TikTok makes to open a creator’s website in a separate app, be it Safari or 3rd-party app like Chrome, Firefox, or Brave. This is also shady behavior on TikTok by forcing users to stay within the confines of the in-app web browser. If a website does not have appropriate traffic encryption in place, TikTok may be able to capture and siphon any information passing through the in-app browser and tying that browsing history to the user. This means:

  • First and last names typed in for online petitions

  • Email addresses submitted for newsletters

  • Shipping addresses provided for purchases

  • Login information to access other online services

  • Other private information entered through text

TikTok ensures this web traffic goes through only their in-app browser so that it stays within their sandbox of iOS to stockpile this information and more. TikTok pushes a number of tricks on iOS to accomplish this.

An “Ominous” Message

When a user visits a profile weblink that is properly secured so the Clock App cannot eavesdrop on web traffic, TikTok gives a message of caution to the user through a confirmation screen before displaying the page, stating:

“You’re about to open an external website. Be cautious and keep your personal information safe.”

Ironically, TikTok only presents this “warning” when your personal information is safe from prying eyes, even TikTok’s.

Screenshot of TikTok’s confirmation screen before visiting secure websites.


Making the URL Text Inaccessible

Another method employed by TikTok is making the text of the URL nearly inaccessible to iOS users. When visiting a creator’s profile, we can easily enough copy the creator’s username from the Clock App by tapping on the username itself, but when trying to copy the text of the URL so we can paste it into Safari the task is not so simple. Even when visiting the creator’s profile page through the “Copy Link” feature on their profile page (tapping the three dots in the upper right-hand corner) and pasting this link into Safari, TikTok hides the creator’s website URL in when visiting the profile page in a mobile web view. See below, where @underthedesknews linktr.ee URL is visible on the TikTok app view (left) versus when viewing their same profile page through the mobile web app view in Safari (right):

The Workaround (ios shortcut)

After searching the web for a workaround and finding none, I eventually discovered and developed my own. By taking a screenshot of the TikTok creator’s profile page, I could use the Live Text OCR (object character recognition) feature integrated into iOS (versions 13 and up) to copy the URL and paste it into Safari. However, the process was very cumbersome switching between apps and copying/pasting over and over, and whenever something gets repetitive it’s best to make a Shortcut.

After more brainstorming and research I was able to build off the work of iOS Shortcuts wizard Matthew Cassinelli by taking his “Extract text from photo” Shortcut and modifying it. The Shortcut takes any photo containing text (in this case, a screenshot of the TikTok creator’s profile with their URL), and scrapes out any text in the photo. From the lines of text the Shortcut scraped, we select the one that contains the website link. That line of text containing the URL to the “Get URLs from” operator, which keeps only the text making up the URL. The Shortcut finally opens the URL in Safari.

Shortcut demo

Play the video from my tweet below to see a demo of the Shortcut in action.

Caveats

The Shortcut can be run through the Share Sheet or separately from within the Shortcuts app. I prefer to run it immediately after I take a screenshot through the Share Sheet. However, keep in mind that each time a screenshot is taken the screenshot will end up in the Camera Roll, so don’t forget to clear them out from time to time if you don’t want screenshots clogging it up.

Remember: this Shortcut can only work with the text it is able to detect and “see” in the photo. That means if a URL is too long that it goes off the screen and the link trails off with ellipses (…), then the URL may not render properly and the user may see receive a 404 error when trying to visit the website.

I’ll update the link to the Shortcut above as I find better ways to improve the process of opening links from the TikTok app into Safari. If you’re as irked by TikTok’s web browser sandboxing as I am and you have any suggestions or alternatives to my method, let me know on TikTok, Instagram, Twitter, or in the comments below

,

Make a Linktree Or Beacons Page with Squarespace

,

Are you looking for a way to funnel users to your newest content, latest product, or new project? Do you need simple but adaptive landing page to drive web traffic from your presence on social media sites like TikTok, Instagram, LinkedIn, or Facebook? Don't want to deal with the hassle of updating your links on each social media page every time you have a new resource to share or campaign to promote? Having a single, one-stop web page where visitors can land to find everything they may need know about you can be handy to use across social media websites.

Businesses, influencers, entrepreneurs, activists, hobbyists and other individuals may use a service like Linktree or Beacons where they can dump a list of links onto one page and then just share their Linktree or Beacons profile. Even though there's a free tier for each of these services, you will need to subscribe to one of their paid tiers to have additional features such as more robust customization, additional pages, or access to in-depth analytics on how your links are performing and where your visitors are going.

If you already pay for hosting of your own website - like I do through Squarespace - why pay more money for something when you can quickly set up through the WYSIWYG editor for no additional monthly fee? By the end of this article, you'll have an adaptive web page with the same functionality of a Linktree page that will not only come in at no additional cost, but you'll also have access to all the analytics for the traffic you drive as well!

Follow the steps below to build your own Linktree clone. Please note: I am using Squarespace 7.0 or higher with the Bedford family of templates for these steps.

Making the Page

1) Log in to your Squarespace dashboard and click the "Pages" section.

We’ll only be working in the Pages section.

2) On the left side, scroll down to the "Not Linked" section and click the plus sign to add a new unlinked web page

3) Under the Layout section, click "About" and then select the "Vertical" option. This will start out with a simple centered layout that gives an image block, a text block, social media block, and some spacers for visual placement. You can start with just a blank template page and build you own if you wish, but I found that using the Vertical About layout template was quickest for me to get a Linktree clone up and running.

Click the plus sign “+” then the “About” layout option for quick setup.

Choose the “Vertical” option - it will show up best for mobile users after setup.

4) Name the new page on the left side panel to something unique/descriptive so you'll know what the page is for (I used "philslinks" for this example).

Give your new page a name.

5) Hover you mouse over the page on the left side and click the settings cog. On the Page Settings screen that pops up, give your new webpage a short, memorable but unique URL slug or just leave it as the default of whatever you named your page in Step 4. Click "Close" for the Page Settings menu

We’ll need to adjust a setting for the page.

Change the URL slug if you wish and click “Close”

6) Now's the time to build out your web page! Hover your mouse over the right pane and click the "Edit" button to enter into the Page Editor.

Click “Edit” to get started building your own Linktree

7) Here you can start customizing your page to your liking. I have the basic areas outlined in the template below. I recommend leaving the default spacers and uploading a custom image (your profile picture, your business logo, etc.) for the Image Block.

Layout described in Step 7.

8) After uploading your custom image, I suggest going into the settings for the Image Block and turning off the caption in the Content tab and changing the shape from Original to Shape (default is a circle) in the Design tab. You can also play around with animations if you wish in the Design tab as well, but leaving everything else as the default is fine.

9) Scrolling down you will see a default text block sandwiched between two Spacer Blocks centered on the page. I suggest deleting these, moving the Social Media block to be just below your custom image, and adding a Text Block and however many Button Blocks you wish to use for links.

Delete these three blocks: the top Spacer Block, the Text Block, and the bottom Spacer Block.

Move the Social Block to be below your Image Block, add a Text Block and Button Blocks

10) The buttons can be edited to display custom text and a custom link that, when clicked, will take the visitor to the specified URL.

Customize your Button Blocks

11) When done editing your buttons and getting your website the way you want, click "Save" to exit out the Page Editor and you're done!

That’s it!

Great job! You've just set up your own personal Linktree. All that's needed to do now is copy your new page's URL and paste it into your social media profiles. Whenever you want to add a new link in the future, you will only need to add a new button in the Page Editor from the Squarespace dashboard on a computer or through the Squarespace app of your iOS or Android device.

There's much more you can do to customize your page to make it look flashier, but that involves advanced topics like modifying the CSS of your website among other things that are beyond the scope of this tutorial. That I'll leave as an exercise for the reader. For now, farewell and happy linking!