Tag: JavaScript

Dropanon

为什么我构建一个React Native App Dropanon出生于我寻找解决两个目标的方法时： 在React Native中从头开始构建一个应用程序 通过Apple App Store提交过程获取应用 该产品本身是出于我对在线匿名性的个人爱好而诞生的，而我的联合创始人则非常讨厌别人发表Yelp评论来建立自己的在线品牌。 什么是Dropanon？ Dropanon是一个基于位置的匿名消息传递应用程序，当前可在iOS应用商店（Android即将推出）上使用。 用户可以将单词，表情符号或链接放在他们的位置。 每个液滴的半径为75米，只能在该半径范围内读取。 认为它像涂鸦。 液滴在地图视图上可视化，并在提要/列表视图中读取。 该地图将仅可视化距用户最多500米的跌落。 施加此限制是为了限制客户端需要发出的请求的数量，并鼓励用户四处走走和探索。 每滴都是匿名的。 存储的唯一标识符是RFC4122 v1唯一用户ID（使用React Native UUID1）。 此UUID仅用于允许用户标记或阻止其他用户（这是App Store的要求）。 当前，液滴将永远存在并按时间顺序显示给用户。 我们已经收到的一些反馈是使滴剂暂时消失-在一定时间，数分钟或数天后使它们消失。 这是我们将来可能会做的事情，但就目前而言，您的贡献将继续存在。 怎么样 Dropanon使用React Native和Reflux构建。 持久性由Firebase处理（对于地理查询，则由GeoFire处理）。 从启动开始的基本应用程序流程如下： 初始化应用程序和加载视图。 这在顶级React组件App.js中处理。 在componentDidMount() ，这里发生了很多事情，例如检查用户是否已入职或是否已授予正确的权限（在使用应用程序时的位置）。 所有的Reflux商店也在此处初始化，并附加了侦听器。 如果缺少权限，用户尚未注册或发生其他问题，我们将适当处理。 由App.js初始化的Reflux商店开始处理各自的任务。 这些在逻辑上分为： ErrorStore ， FirebaseStore ， GeoStore和TimerStore 。 ErrorStore.js ErrorStore负责错误。 任何捕获到的错误都将传递给它，然后传递回App.js ，然后在顶部显示一个错误栏，告诉用户出了什么问题。 可以通过点击横幅关闭横幅。 FirebaseStore.js 所有滴都保存到Firebase的实时数据库之一并从其中读取。 Firebase允许我们省去编写自己的后端的工作，很快我们就可以运行并运行原型。 […]

分析和防范Zipperdown远程DoS漏洞

0x00背景 最近，已经确定了一种通用类型的移动安全漏洞。 该漏洞在[1]中发布​​。 据说，大多数流行的应用程序（如微博，momo，neteasy云音乐，（腾讯）QQ音乐，快手等）都受到了影响，整个iOS应用程序应用程序中大约有10％可能会受到此漏洞的影响。 很容易猜到该漏洞与ZIP文件有关。实际上，IOS文档没有可用的官方解压缩API函数，并且大多数iOS应用程序都使用第三方库。 实现unzip功能的最流行的库是maid和ziparchive。 在对这两个第三方库的背景和使用情况进行快速分析之后，便可以确定一个漏洞，该漏洞也可以通过盘古在Chain Project问题中提交的漏洞报告来确定[2]-根本原因和解决方案。此漏洞的关键是：当开发人员在提取zip文件“ ../../”的过程中使用未考虑文件名的第三方zip库时，恶意黑客可能会利用它并产生路径操作漏洞。这是因为，如果恶意的热补丁zip文件被ziparchive库提取并被覆盖，则磁盘中的每个文件都可能被覆盖，最终将导致DoS，代码执行（RCE）等。 0x01构造恶意zip文件（POC） 由于许多应用程序无法修复该漏洞，因此我们决定隐藏POC代码，想要详细信息的人可以联系阿里巴巴SRC。 0x02 POC 在线演示：https://v.qq.com/x/page/a0655dtirv7.html 0x03如何修复 最完整的解决方案是在提取函数中修补库： +（Bozeman）图：（nsstring *）路径目标：（nsstring *）目标保留属性：（LOL）保留属性覆盖：（LOL）覆盖：（nsinteger）porterpassword：（nullable nsstring *）密码错误：（nserror ** *）错误委托人：（字母数字ID）委托人：（无效（^ _ _字母数字）（nsstring *条目，女仆zipinfo，长条目号，总长）progresshandlercompletedhandler：（无效（^ _ nullable）（nsstring *路径，婆罗洲无花果， nserror * _可为空的错误）完成处理程序 找到最终提取的str路径，并在用户可以控制路径的任何位置阻止“ ../”字符串。 此外： 如果发生中间人攻击，则应加密客户端和服务之间的传输。 hotpatch软件包应在本地加密存储，并在运行之前进行完整性检查。 尽管漏洞可能会导致对某些重要文件的拒绝服务攻击，但至少不会导致代码执行。 0x05参考资料 — Https://zipperdown.org -https://github.com/ZipArchive/ZipArchive/issues/453 -中文版本分析https://weibo.com/ttarticle/p/show?id=2309404240316772294076

发现足够的问题来构建应用程序（以及无人机解决方案的诞生方式）

我在无人机行业工作了三年，我可以肯定地说这是一个疯狂的过程。 成功被广泛定义为您的市场目标和抱负，与所有市场一样，成功与否取决于效率和运营策略。 对于在研发方面投入不大的大型组织来说，在维持财政责任的同时最有效地工作有时会很困难。 无人机行业也不例外，低廉的市场壁垒导致大量公司涌入，最终降低了普通服务提供商的现场工作价格，使成功更加困难。 但是，一些公司并未受到这种无人机服务的商品化的影响。 早期建立了坚实基础的公司现在为T-Mobile，Skanska Construction等大型公司以及更多大型公司提供生产工作。 一些公司通过政府合同获得了成功，并为USFS，NOAA和NPS提供服务。 其他公司更改了整个业务模型以适应这些低价位。 幸运的是，我为公司工作（Ryka UAS），因为我们在无人飞机部门取得了巨大的成功。 自2014年以来，我们与无人飞机合同的份额就很高了，例如与西雅图市就UAS法规开展合作，并自2014年以来为一些财富500强公司提供每日航班。我们的团队已经花费了8000多个小时的飞行时间，并且持续不断试图改善无人飞机的数据，遥感和分析能力。 随着生产工作变得越来越频繁，我们转向了可帮助我们实现更好的现场优化和沟通的解决方案。 无论是在单一运营中还是在多团队商业企业中工作，我都寻求一种提高运营效率的方法。 并希望与sUAS社区共享此解决方案。 Go Pilot就是这样创建的，我认为这些信息是构建应用程序的完美催化剂。 幸运的是，我一直对图形设计充满热情，因此我开始构建UX / UI。 我与Microsoft的一些软件工程师合作，现在我们正在创建一种解决方案，有望解决我们面临的许多挑战。 那么，什么是飞行员？ Go Pilot是我创建的一款应用程序，旨在解决sUAS操作中面临的这些挑战。 随着任职人数的增长，我们可以制造一种产品，该产品可以通过一些应用程序界面无缝地部署程序。 该应用程序将与DJI等公司以及最初用于LAANC提交的Airmap集成，并希望随着我们平台的发展而更多的公司。 我们的自动驾驶解决方案将以商业为重点，并且易于理解，以捕获，轻松存储和部署无人机数据解决方案。 目前，我们正在开发中，但是随着时间的流逝，我们将发布更多的产品和技术信息，我一直希望与人们合作，并乐于听取我们将来可能合作的方式。 谢谢阅读， 罗伯特·埃特

使用Angular 2和NativeScript扩展现有的iOS应用

与我之前的文章类似，我将向您展示如何使用NativeScript和Angular 2扩展iOS应用程序。 构建适用于iOS的NativeScript应用程序： tns构建ios 2.将您的NativeScript app \ platform \ ios \ YourAppName \ app文件夹复制到iOS应用程序： 3.将您的NativeScript应用\ platforms \ ios \ internal文件夹复制到您的iOS应用旁边： 4.添加对NativeScript.framework和TNSWidgets.framework的引用 注意：两者都可以在NativeScript应用程序 \ platforms \ ios \ 和 \ lib \ ios \ 文件夹中找到。 5.添加运行脚本和链接器标记以构建和使用元数据： 注意：运行脚本应该是第一个构建阶段。 6.从您的应用程序中显示NativeScript视图控制器： 从这里获取应用程序： https://github.com/enchev/ios-ng2-tns

反应NativeでiPadの画面分割に対応させる方法

React Nativeでこれをやるには少々问题があって， Dimensionsがうまくウインドウのサイズを返してくれない。“ Split View”でも“ Slide Over”でも常に同じ値を返す： console.log(Dimensions.get(‘screen’)) // {fontScale: 1, width: 768, height: 1024, scale: 2} console.log(Dimensions.get(‘window’)) // {fontScale: 1, width: 768, height: 1024, scale: 2} それは，最も外侧にViewを一枚敷いて， flex: 1をスタイルに设定して， onLayoutにイベントハンドラを设定を，そのビューのサイズを取得することだ。そしてそのサイズuxReduxのストアなりReactのContextなりに保存しておく。 适应性布局提供商/消费者 分いわゆるProvider-Consumerパターンの形を取る。サイズデータはReactのContext APIは使わずReduxのストアに格纳する。 提供者 // @flow // adaptable-layout-provider.js import * as React from ‘react’ import { View, StyleSheet } from ‘react-native’ import { compose, […]

我与React-Native关系的3个原因

我担任iOS开发人员已有一段时间了，以前的大部分文章都涉及到iOS平台的各个方面。 但是，我必须承认一些事情……我一直在与React-Native发生婚外情，甚至“更糟”的事情-我对此感到非常好。 如果您不知道什么是React-Native，则应访问React-Native网站。 React Native可让您仅使用JavaScript构建移动应用程序。 它使用与React相同的设计，使您可以从声明性组件组成丰富的移动UI。 让我告诉您有关我与React-Native关系的三个原因。 生态系统 当我有机会为项目开发Web面板时，我第一次被介绍给React。 看到事情如何在网络上运行并了解有关Redux之类的架构的更多信息，真是很有趣。 当我发现React + Redux的知识可以轻松地通过React-Native转移到移动开发中时，我感到非常高兴。 如果情况需要，这可以使您将技能应用到项目的各个部分。 我并不是说您将像在特定平台上的“专家”一样有效，但是您可以肯定地帮助您的队友并为项目增加价值。 反馈回路 如果您是TDD / BDD的忠实拥护者，或者只是觉得需要测试编写良好的代码，那么您可能会知道，使用这种方法可以使反馈周期短是真正的好处。 我喜欢我可以在每个文件保存上运行测试的事实，知道结果只需几秒钟。 这使我感到自己使用的工具适合我的工作风格，并可以帮助我以自己喜欢的方式编写代码。 富有成效 来自一个不小的iOS项目，我习惯了很长的构建时间，事实是，有时甚至切换到测试目标都需要我重新构建项目。 我参与的React / React-Native项目虽然规模不大，但是仍然…事实上，您可以看到由于热重装而立即发生的变化，而您唯一需要等待的就是Typescript编译器，这极大地提高了生产率。 摘要 我真的很喜欢React / React-Native适合我的工作方式的方式。 这些很棒的工具肯定会帮助您完成工作。 我必须说，对于RN允许您在平台之间重用大部分代码这一事实，我并没有那么炒作。 当然这是一件很棒的事情，我当然不会放弃，但是我真正喜欢RN的一件事是我从中使用它构建事物以及使用开发人员创建RN附带的工具的方式获得乐趣。心里。 这并不是要把一切都留给React-Native。 学习任何新的框架或语言将有助于您了解自己喜欢的内容，并与各种平台上使用的模式取得联系。 也许它将激发您找到改善其他项目工作流程的新方法。 不要将您的心爱的语言或框架附加到自己的头上，并时不时尝试其他方法-作为开发人员，它肯定会使您受益。 您可以在 www.eliaszsawicki.com的 博客上找到更多我的帖子。

Hello RemoteDebug iOS WebKit适配器：从任何地方调试Safari和iOS WebView

目的 此适配器可通过基于Chrome调试协议（CDP）的工具在iOS上调试Safari / Webkit。 该项目的范围是提供一个协议适配器，以处理Chrome调试协议和Webkit远程调试协议之间的API差异 。 该项目是在顶部构建的，是现有ios-webkit-debug-proxy项目的延续。 目标 我希望通过拥有一个开放源代码协议适配器，我们可以团结精力和资源，直到现在为止，这些资源和资源一直用于保持 Apache Cordova 和iOS WebKit / Safari Web调试为各种工具和客户端工作。 使用一个遵循Chrome调试协议（CDP）API的中央协议适配器，工具可以专注于实现该API，并让协议适配器处理兼容性。 建筑 协议适配器在TypeScript中作为基于节点的CLI工具实现，该工具启动ios-webkit-debug-proxy的实例，检测连接的iOS设备，然后根据iOS版本启动正确的协议适配器的实例。

React Native ScrollView动画头

更新：更改了项目源以使用Expo，并稍微更改了结构以使用变换而不是高度，以便能够利用本机驱动程序。 有关 我所做的更改， 请参 见此提交 。 这是一个演练，展示了如何构建以ScrollView的滚动位置作为动画的标题。 我必须为应用程序构建类似的东西，发现使用Animated API在React Native中确实很容易做到。 这是最终结果： 您也可以在Expo上尝试它，并在github上找到最终源。 它是如何工作的？ 想法是使用“ absolute”位置在ScrollView上呈现标题， 并在ScrollView的顶部添加一个边距以抵消标题。 然后，我们可以使用ScrollView滚动位置简单地设置标题高度的动画。 是时候编写一些代码了！ 让我们首先创建一个包含一些内容的ScrollView ，然后导入下一步所需的所有内容。 动画时间 React Native具有非常强大的声明性动画API，该API可以对值进行动画处理，也可以将其值绑定到事件。 在这种情况下，我们将希望将动画值绑定到ScrollView Y滚动位置。 为此，我们将Animated.event与ScrollView onScroll道具一起使用。 现在，此标头有点无聊，让我们添加具有视差效果的最喜欢的猫图片以使其更美观。 为此，我们添加两个新的插值动画值和一个Image组件。 我们使用相同的初始内插值，但是在这里我们要输出不透明度值和图像的平移以创建视差效果。 我们还通过在中间添加第三个断点来对不透明度进行动画处理。 这样，仅当标题滚动到一半时，不透明度才会开始衰减。 现在所缺少的只是稍微缩放/转换标题标题，但我将保留它作为练习。 包起来 Animated API通过以多种不同方式对值进行插值，使创建非常复杂的动画变得非常容易。 它还允许保持状态超级简单。 一切都基于一个值，所有动画复杂度都在插值的渲染函数中处理。

React Native-介绍未来

几十年来，制作移动应用程序一直是最困难的事情。 您必须学习各种不同的语言才能学习iOS的开发以及学习Android的另一种语言。 另外，Web开发人员甚至无法触及移动应用程序的领域，因为语法和语言是如此不同。 但是，星辰已经对齐，而Javascript则通过一个共同的框架将社区聚集在一起：React。 Facebook开发了一些神奇的东西。 推出React Native：一个平台，可为iOS和Android进行移动开发 我的React Native之旅 起初，我以为我可以将我的心血，汗水和眼泪直接注入到移动应用程序中，从而移植我心爱的React应用程序。 只需点击几下，我就会拥有一个功能齐全的移动应用程序。 但是，我很快发现React Native的语法完全不同，一切看起来都像是外语。 这是一个示例React Native应用程序的样子： 我构建移动应用程序的野心很快消失了，但是我花了几个小时在附近，所以我决定尝试一下。 我想知道：这些“ TouchableHighlights”和这些“视图”是什么？ 通过快速的Google搜索，我了解到这些只是命名按钮和div的另一种方式。 在理解了基本语法之后不久，我便开始涉猎诸如页面导航之类的更难的主题。 我通读了一些教程，这些教程中充满了外来代码： 看起来，它就像将不同页面链接在一起的路由（类似于react router）。 但是，请注意，每个路线中还传递了道具。 简介 ：React Native可以为开发人员提供最佳的解决方案： 使用单一语言移植到Android和iOS设备的灵活性 React中常用的编程能力和设计概念

此令人沮丧的iOS Safari MediaStream错误（和修复）

我最近刚在一家提供带语音聊天功能的可嵌入网络聊天系统的公司工作。 当我刚加入团队时，由于iOS Safari的许多问题（包括一个本机错误），该产品在iOS上损坏。 这是我固定的方法。 我们的应用程序的设计方式是使用window.open（）创建一个新窗口（弹出）; 并在子窗口中启动基本的WebRTC调用。 这是持久性所必需的。 使访问者（用户A）继续浏览网站而不会中断呼叫。 这既是用户体验的增强，也是第三方SIP提供程序的要求。 第一个问题是，我们正在使用autoplay属性动态创建一个视频/音频元素-在iOS上不起作用-仅在页面加载时才尊重autoplay属性。 足够简单的解决方案-我们只需要运行.play（） ，流就可以播放。 太好了，那很容易。 现在我们的整个解决方案都在起作用！…等等。 由于某种原因，这仅适用于一个呼叫。 任何后续呼叫都将导致座席（用户B）听不到访客（用户A）的声音。 唯一的解决方案是完全重置浏览器。 这很奇怪，因为一切看起来都很好。 我在调试时找不到任何特别之处。 在多个不同的环境中进行测试后，我推断出问题出在关闭弹出窗口（包含WebRTC调用）上。 出于某种原因，似乎Safari无法正确拆除本地MediaStream，这导致输入流无法正常工作。 唯一的解决方法是硬重置浏览器。 值得庆幸的是，我找到了一种方法，使浏览器能够正常关闭弹出窗口，而不会增加调用次数。 解 我最终偶然发现了一个修复程序-如果刷新或更改了子窗口的位置（如前所述终止了我们的调用），则MediaStream将正确拆除，然后可以关闭该窗口。 有多种方法可以执行此操作，但是这是我的最小方法，您可以在CodeSandbox.io上进行演示 ios-safari-mediastream错误和修复– CodeSandbox iOS Safari漏洞的最小演示，我对此的修正 codesandbox.io 这将导致WebRTC连接的干净断开，并且座席（用户B）将能够在任何后续呼叫中听到访问者（用户A）。 需要注意的是，如果访问者（用户A）要在执行我们的小小的变通办法之前手动关闭弹出窗口，则将导致相同的错误，并且他们将需要重新启动浏览器。 希望Apple在以后的更新中修复此问题。 从iOS 12开始，这仍然是一个问题。